vue+element ui 实现文件上传下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+element ui 实现文件上传下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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表单中时，出发添加校验成功后进行文件上传
        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代码

<!-- 查看 -->
<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" },);

文章来源地址https://www.toymoban.com/news/detail-628378.html

到了这里，关于vue+element ui 实现文件上传下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！