Vue實現附件上傳功能

本文實例為大家分享了Vue實現附件上傳的具體代碼，供大家參考，具體內容如下

前言

前端 UI 是用的是 element-ui 的上傳功能

本文主要記錄下代碼，方便下次複製粘貼

前端部分

HTML
 

• limit： 限制文件個數 1 個

• on-remove： 移除附件時的鉤子函數，主要就 console 輸出下

• on-error： 用於處理上傳異常後的處理，本人這主要用來關閉彈窗和全屏等待

• file-list： 綁定附件

• auto-upload： 禁止自動上傳，true 的話選了文件就自動上傳

• http-request： 自定義上傳文件請求方法，默認方法會與 mock 產生 XmlRequest 重新生成導致找不到文件問題，我註釋了 mock 還是那樣，沒具體研究

• action： 原上傳文件的路徑，由於使用了自定義上傳文件請求，即 http-request，因此這個字段隨便寫就好，不寫不行好像
  

  選取文件上傳到服務器-->支持上傳 {{ strRebuild(fileType) }} 格式，且不超過 {{ fileSize }}M

JS

  import { strRebuild, lastSubstring } from '@/utils/strUtil'  import { message } from '@/utils/message'    export default {   data() {   return {   // 附件列表   fileList: [],   // 允許的文件類型   fileType: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'txt', 'jpg', 'png', 'jpeg'],   // 運行上傳文件大小，單位 M   fileSize: 10,   }   },   methods: {   // 清空表單   clear() {   // 清空附件   this.$refs.upload.clearFiles()   },      // 附件檢查   // 檢查附件是否屬於可上傳類型   // 檢查附件是否超過限制大小   checkFile() {   var flag = true   var tip = ''   var files = this.$refs.upload.uploadFiles   files.forEach(item => {   // 文件過大   if (item.size > this.fileSize * 1024 * 1024) {   flag = false   tip = ' 文件超過' + this.fileSize + 'M'   }   // 文件類型不屬於可上傳的類型   if (!this.fileType.includes(lastSubstring(item.name, '.'))) {   flag = false   tip = ' 文件類型不可上傳'   }   })   if (!flag) {   message('error', tip)   }   return flag   },      // 提交附件   submitUpload() {   if (this.checkFile()) {   console.log('上傳附件...')   this.$refs.upload.submit()   } else {   console.log('取消上傳')   }   },     // 自定義文件上傳方法   uploadFile(file) {   // 把文件放入 FormData 進行提交   const param = new FormData()   param.append('files', file.file)   uploadFile(param).then(response => {   // TODO 一些關閉彈框，上傳成功提示等   })   },     // 移除附件   handleRemove(file, fileList) {   console.log('移除附件...')   },     // 附件上傳失敗，打印下失敗原因   onError(err) {   message('error', '附件上傳失敗')   console.log(err)   },     // 字符串重組   strRebuild(str) {   return strRebuild(str)   }   }  }

工具類 JS

strUtil.js

  // 字符串相關工具類  // 數組根據分隔符重組為字符串  export function strRebuild(arr, split) {   if (arr === undefined || arr === null || !(arr instanceof Array) || arr.length === 0) {   return ''   }   if (split === undefined || split === null) {   split = '，'   }   var str = ''   arr.forEach((v, i) => {   if (i === arr.length - 1) {   str = str + v   } else {   str = str + v + split   }   })   return str  }    // 截取最後一個特定字符後面的字符串  export function lastSubstring(str, split) {   if (str === undefined || str === null || split === undefined || split === null) {   return ''   }   return str.substring(str.lastIndexOf(split) + 1)  }

message.js

  import { Message } from 'element-ui'    // 提示封裝 type 提示類型， msg 提示信息，duration 持續時間  export function message(type, msg, duration) {   Message({   message: msg || 'success',   type: type || 'success',   duration: duration || 5 * 1000   })  }    // 帶刪除鍵提示，duration 為 0 時，不會自動消失  // 提示封裝 type 提示類型， msg 提示信息，duration 持續時間  export function messageShowClose(type, msg, duration) {   Message({   message: msg || 'success',   type: type || 'success',   duration: duration || 0,   showClose: true   })  }

API

  // 附件上傳  export function uploadFile(file) {   return request({   url: '/uploadFile',   method: 'post',   headers: {   'Content-Type': 'multipart/form-data; charset=utf-8'   },   data: file   })  }

後端接口

  /**   * 單文件上傳   * @param files 接收文件要以數組接收   * @return   */  @PostMapping(value="/uploadFile")  public void uploadFile(@RequestBody MultipartFile[] files) {   // TODO  }