vue?elementUI?處理文件批量上傳方式

更新時間：2022年04月26日 14:49:54 作者：伊人笑桃花酒

這篇文章主要介紹了vue?elementUI?處理文件批量上傳方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

elementUI 如何處理文件批量上傳

問題

elementUI的Upload上傳組件，通過設(shè)置multiple為true，就可以實現(xiàn)多選文件；但是在處理的時候還是一個一個傳上去。

目前需要在所有文件上傳后，將某幾個上傳錯誤的結(jié)果拼接起來做一次提醒

解決

this.$refs.upload.uploadFiles

該屬性可以獲取上傳的文件相關(guān)信息，包括上傳后后端返回的response

html

el-upload
? ref='upload'
? class="upload-demo"
? action="https://jsonplaceholder.typicode.com/posts/"
? :on-preview="handlePreview"
? :on-remove="handleRemove"
? :before-remove="beforeRemove"
? multiple
? :on-success='upLoadSuccess'
? accept=".doc,.docx">
? <el-button size="small" type="primary">點擊上傳</el-button>
? <div slot="tip" class="el-upload__tip">只能上傳doc/docx文件</div>
</el-upload>

方法處理

upLoadSuccess(response, file, fileList) {
    if (this.$refs.upload.uploadFiles) {
        let length = this.$refs.upload.uploadFiles.length
        this.UpLoadFilesLength ++  // 全局變量，用來計算upLoadSuccess方法調(diào)用次數(shù)
        if (this.UpLoadFilesLength == length) {
            this.UpLoadAllFilesLength = 0  // 如果方法調(diào)用的次數(shù)和文件列表的長度相同，說明所有文件都上傳完畢，將該全局變量置0
            this.resErrorStr() // 該函數(shù)處理每個文件上傳錯誤情況下response拼接
        }
    }
},
resErrorStr() {
    if (this.$refs.upload.uploadFiles) { // 如果存在這個值
        let filesList = this.$refs.upload.uploadFiles.slice()
        let UpLoadAllErrorStr = '' // 錯誤信息拼接變量
        for (let i = 0; i < filesList.length; i++) {
            if (filesList[i].response) {
                if (filesList[i].response.code != 200) { // 如果該文件上傳后返回的狀態(tài)值不是200，則說明該文件上傳錯誤
                    UpLoadAllErrorStr += `${filesList[i].response.message}<br/>`
                }
            }
        }
        if (!UpLoadAllErrorStr) {
            this.$message({ type: 'success', message: '上傳文件成功！' });
        } else {
            this.$message({
                type: 'error',
                dangerouslyUseHTMLString: true,
                message: UpLoadAllErrorStr
            });
        }
        this.$refs.uploadAll.uploadFiles = [] // 調(diào)用完成之后將值置空，防止再次上傳將上次結(jié)果也記錄下來
    }
},
handleRemove(file, fileList) {
    console.log(file, fileList);
},
handlePreview(file) {
    console.log(file);
},
beforeRemove(file, fileList) {
    return this.$confirm(`確定移除 ${ file.name }？`);
}

elementUI 批量上傳下載注意事項

批量手動上傳文件，和表單數(shù)據(jù)一起提交

在el-upload組件關(guān)鍵的鉤子,其它省略

multiple
:auto-upload = "false"
:file-list = "fileList"
:on-change = "selectFile" （里面是把上傳的fileList傳給自定義的 this.fileList）

點擊上傳,將多個文件和表單數(shù)據(jù)一起上傳

a.定義FormData，將表單數(shù)據(jù)和文件填充到FormData里面

b.自定義請求頭部，Content-type：‘multipart/form-data’

let formData = new FormData()
for(let key in data){
    if(data[key]){
      formData.append(key,data[key])
    } 
}
this.fileList.forEach((element,i) =>{
  formData.append('fileList',element.raw)
})
let rs = await axios({
  method:'post',
  url: cfg.uploadURL + '/sp/addSp',
  data: formData,
  headers:{
    'Content-type':'multipart/form-data'
  } 
})

表格中上傳文件中，組件鉤子函數(shù)自帶參數(shù)

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="（file,fileList）=>{
     return beforeRemove（file,fileList,scope.$index）
  }"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">點擊上傳</el-button>
  <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
beforeRemove（file,fileList,index）{
    console.log(index)
}

批量下載（后臺不返回壓縮包，前端就一個個下載了）

download(val){
  let vals = val.split(',') //后臺返回的文件標(biāo)識符數(shù)組
  vals.forEach((element) =>{
    const iframe = document.createElement("iframe");
    iframe.style.display = "none";
    iframe.style.height = 0;
    iframe.src = cfg.baseURL+'下載路徑'+element; 
    document.body.appendChild(iframe); 
    setTimeout(()=>{
      iframe.remove();
    }, 1000)
  })
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: