1.上傳html代碼：

<el-upload 
    ref="upload" 
    :limit="10" 
    accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx"
    name="files" 
    :multiple="true" 
    action 
    :headers="myToken" 
    :on-change="handleFileChange"
    :before-remove="handleFileRemove" 
    :auto-upload="false" 
    :file-list="upload.fileList">
    <el-button 
        slot="trigger" 
        size="small" 
        type="primary" 
        class="color">
        選取文件
    </el-button>
</el-upload>
<div>支持上傳".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" 文件，最多上傳10個</div>

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表單中時，出發(fā)添加校驗成功后進行文件上傳
        add(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                     //需要的js代碼
                    // 創(chuàng)建新的數據對象
                    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;
                }
            });
        },
        // 上傳發(fā)生變化鉤子
        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代碼

<!-- 查看 -->
<template>
    <div class="government-display">
        <el-button type="info" class="region-btn-back" icon="el-icon-back" @click="back">
            返回
        </el-button>
        <div v-for="item in title" :key="item.prop" class="government-display-title">
            {{ item.title }}：
            <span> {{ msg[item.prop] }}</span>
        </div>
        <div>
            <div class="government-display-title">附件：</div>
            <div v-for="item in uploadPicture" >{{ item.fileName }}<span class="download" @click="downLoad(item.fileName, item.filePath)">點擊下載</span></div>
        </div>
    </div>
</template>

下載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" },);

文章來源地址http://www.zghlxwxcb.cn/news/detail-628378.html

到了這里，關于vue+element ui 實現文件上傳下載的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！