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

1.上传html代码：

    
        选取文件
    

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

2.api中需要携带的数据

//文件上传api
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') } });
//文件下载api
export 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" },);