vue+element ui 实现文件上传下载

1.上传html代码：

选取文件支持上传".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" 文件，最多上传10个

2.api中需要携带的数据

//文件上传apiexport const upload = (data, date, userNumber) => axios.post(`/file/upload?date=${date}&userNumber=${userNumber}`, data, { headers: { 'Content-Type': 'multipart/form-data', token: window.localStorage.getItem('token') } });//文件下载apiexport const download = (data) => axios.post("/file/download", data, { responseType: "blob" },);

3.上传js代码

export default {data() {return {upload: {fileList: [],fileName: []},myToken: {Authorization: localStorage.getItem("token"),},date: "",userNumber: "",}},methods: {// 将文件上传坐在form表单中时，出发添加校验成功后进行文件上传add(formName) {this.$refs[formName].validate(async (valid) => {if (valid) { //需要的js代码// 创建新的数据对象let formData = new FormData();// 将上传的文件放到数据对象中this.upload.fileList.forEach(file => {formData.append('file', file.raw);});var date1 = new Date()this.data = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()this.userNumber = JSON.parse(decodeURIComponent(window.atob(localStorage.getItem("userNumber"))));let res = await SuperviseSave(params)//上传表单内容if (res.status == 200) {try {// 添加成功let res = await upload(formData, this.data, this.userNumber)//上传文件if (res.data == "上传成功") {this.close("addSuccess")this.success("数据添加成功")}} catch (err) {if (err.data = "upload failed:新建 DOCX 文档.docx文件不能为空") {this.success(err.data)}}}} } else {return false;}});},// 上传发生变化钩子handleFileChange(file, fileList) {this.upload.fileList = fileList;const newListLength = new Set(fileList.map(item => item.name)).size;const listLength = fileList.length;if (listLength > newListLength) {this.success("文件名存在重复，可能会导致文件覆盖，请进行修改")}},// 删除之前钩子handleFileRemove(file, fileList) {this.upload.fileList = fileList;},},}

下载html代码

返回{{ item.title }}： {{ msg[item.prop] }}附件：{{ item.fileName }}点击下载

下载js代码

data() {return {uploadPicture: [],filePath: ""}}, methods: {//请求文件下载接口async downLoad(fileName, filePath) { //请求下载接口let res =await download({filePath,//文件存储路径fileName,//文件名})//配置一下代码进行下载let url = window.URL.createObjectURL(new Blob([res.data]));let link = document.createElement("a");link.style.display = "none";link.href = url;link.setAttribute("download", fileName); //fileName下载后的文件名document.body.appendChild(link);link.click(); // 释放内存window.URL.revokeObjectURL(link.href)}},

// 文件上传export const upload = (data, date, userNumber) => axios.post(`/file/upload?date=${date}&userNumber=${userNumber}`, data, { headers: { 'Content-Type': 'multipart/form-data', token: window.localStorage.getItem('token') } });// 文件上传export const checkFiles = (data, date, userNumber) => axios.post(`/file/checkFiles?date=${date}&userNumber=${userNumber}`, data, { headers: { 'Content-Type': 'multipart/form-data', token: window.localStorage.getItem('token') } });//文件下载export const download = (data) => axios.post("/file/download", data, { responseType: "blob" },);