VUE+VANT 实现文件上传读取及下载功能

项目中要实现的效果

 

 

 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'})
}

如有问题，欢迎大家指正