這一篇我所要說的是，通過"<input>"標簽結合XMLHttpRequest把文件上傳到服務端保存，并展示在頁面
上的實現過程；我會大致介紹實現過程，畢竟在工作中實現大于天嘛，其他的要想細致了解需要針對性的
去照看資料；話不多上，直接上手。

第一步 創建上傳點擊事件

<input ref="file" type="file" name="" style="display: none" @change="onChange" />type：屬性值決定上傳文件的類型@change: input的值變化時觸發this.$refs.file.click(): 觸發彈框，讓其可以選擇選擇好要上傳的文件后，點擊打開，于此就會觸發@change事件

第二步 處理接收的文件

onChange() {// 獲取上傳后的文件信息const file = this.$refs.file?.files[0]；// 獲取到文件信息后，后邊就是如何將文件信息上傳到服務端// 這里說明，要根據后端接口需求進行響應的傳遞// 區別一，上傳的是圖片文件，后端接口需要的是base64格式的圖片信息，此時需要將獲取的file轉成base64// 區別二，后端接口需要formdata格式文件，此時就要將file轉成formdata格式發送給后端// 這里說明一下formdata格式上傳// url 接口地址全地址this.uploadFile(file, url);}

第三步 處理服務端上傳

uploadFile(file, url) {// 處理文件轉換成formData格式const formdata = new FormData();// 這里只是基本設置，對應接口需求設置響應的類型屬性值formdata.set('file', file);formdata.set('Status', 0);// 接口調用let xml = new XMLHttpRequest();xml.open('POST', url， true) // 第三個值指定接口是否異步// 設置請求頭信息xml.setRequestHeader(’token‘, token);// 監控上傳進度xml.upload.onprogress = this.onprogressEvent// 接口調用成功回調xml.onload = this.onloadEvent// 接口調用失敗處理xml.onerror = this.onerrorEvent}onprogressEvent(e) {if (e.lengthComputable) {// 可以獲取到實時的接口進度this.realTimePercent = +parseInt((e.loaded / e.total) * 100);}}onloadEvent(e) {// 獲取到接口調用成功后的返回數據const res = JSON.parse(e.currentTarget.response);...}onerrorEvent(e) {// 接口調用失敗后的處理。。。}

至此，文件上傳的過程就講述完了，項目中實踐還應結合項目需求做對應的調整；
建議，每一步的執行都要打印一下，看看實際獲取的信息來做相應的處理。

總結

以上是生活随笔為你收集整理的js实现文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。