VUE+VANT 实现文件上传、下载功能

逩跑鍀小学生

已于 2022-01-24 14:44:06 修改

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

于 2022-01-24 14:43:31 首次发布

本文链接：https://blog.youkuaiyun.com/codingLeader/article/details/122667185

本文介绍了一个使用Vue实现的文件上传与下载功能的具体实现方法。包括了页面布局、Vue的方法代码及接口请求配置等内容。通过具体示例展示了如何进行文件的上传与下载操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、页面布局

<p class="download" @click="downloadExcel">下载导入模板</p>
<div class="uploader-box">
    <van-uploader v-model="fileList" accept=".xls, .xlsx" :after-read="afterRead" :deletable="false" @delete="delFile" multiple>
        <van-icon name="plus" />
    </van-uploader>
</div>

2、VUE方法代码

// 下载excel
downloadExcel() {
   templateDownLoad().then(res => {
                    // var fileName = res.headers("Content-Disposition").split(";")[1].split("filename=")[1];
                // var fileNameUnicode = res.headers("Content-Disposition").split("filename*=")[1];
                // if (fileNameUnicode) {// filename* 时，取filename* 并进行解码
                //     fileName = decodeURIComponent(fileNameUnicode.split("''")[1]);
                // }
                let blob = new Blob([res], {
                    type: 'application/vnd.ms-excel'
                })
                if ('msSaveOrOpenBlob' in navigator) { // IE导出
                    window.navigator.msSaveOrOpenBlob(blob, fileName);
                }
                const link = document.createElement('a')
                link.style.display = 'none'
                link.href = URL.createObjectURL(blob)
                link.download = '雇主团单投保信息导入模版' //下载的文件名
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            }).catch(error => {
                this.$toast("下载失败，请稍后重试！")
            })
        },

//上传文件
        afterRead(file) {
            let _this = this
            const formData = new FormData();
            formData.append('file', file.file)
            excelUpload(formData).then(res => {
                if (res.code == '0') { // 文件上传成功
                    this.$toast("文件上传成功！")
                    this.employerObj.empOrderInfo = res.result
                    this.submitFlag = false
                } else if(res.code == '001') { // 下载错误信息
                    setTimeout(function(){
                        _this.errorFlag = true
                        _this.fileNo = res.result.contractNo
                    },1000)
                } else if(res.code == '110001') { // 直接提示错误信息
                    this.$toast(res.message)
                }
            }).catch(error => {
                console.log(error)
            })
        },

3、配置接口请求方式，responseType: bolb

/**
 * 模板下载
 * **/
export function templateDownLoad(){
    return http.get(`${URI.augeas}/geek/emp/templateDownLoad`,{responseType:'blob'})
}