本文實例為大家分享了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，因此這個字段隨便寫就好，不寫不行好像

<el-upload ref='upload' :limit='1' :on-remove='handleRemove' :on-error='onError' :file-list='fileList' :auto-upload='false' :http-request='uploadFile' action='https://jsonplaceholder.typicode.com/posts/' class='upload-demo'> <el-button slot='trigger' size='small' type='primary'>選取文件</el-button> <!-- <el-button size='small' type='success' @click='submitUpload'>上傳到服務器</el-button> --> <div slot='tip' class='el-upload__tip'>支持上傳 {{ strRebuild(fileType) }} 格式，且不超過 {{ fileSize }}M</div></el-upload>

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}

更多文章可以點擊《Vue.js前端組件學習教程》學習閱讀。

關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

更多vue學習教程請閱讀專題《vue實戰教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。