使用element-ui的el-upload进行excel文件上传与下载

需求：前端上传文件后，后端接受文件进行处理后直接返回处理后的文件，前端直接再将文件下载下来。

通常我们都是直接使用el-upload的action属性来直接完成文件上传的操作，如果要进行后续文件的直接下载，可以在on-success中用代码进行操作，若存在401权限问题也可以直接设置headers属性添加token，以下：

 

<el-upload accept=".xls,.xlsx" drag  :limit="1"  :auto-upload="true" 
    :action="actionUrl"
    :headers="headers"
    :on-success="handleSuccess" >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
    </div>
    <div class="el-upload__tip" slot="tip">* 请上传excel文件</div>
</el-upload>

actionUrl:`${this.BASEURL}/xxx`,   // 接口
headers:JSON.parse(sessionStorage.getItem('access_token')).content, //获取token

handleSuccess(){
    // 接口调用成功后文件下载
    let contentType = res.headers['content-type']
    let contentDisposition = res.headers['content-disposition']
    if (contentType.indexOf('application/json') !== -1) {
    } else {
        contentDisposition = contentDisposition.split(';')[1]
        let filename = contentDisposition.split('=')[1]
        let filenameStr = window.decodeURI(filename.split(',')[0], 'utf-8')
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        const link = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        // 后台在header中传文件名
        link.href = href
        link.download = filenameStr
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
    }
}

但是el-upload不支持设置responseType，如果想设置responseType，就老老实实自己调接口写吧，使用http-request 实现，以下：

<el-upload accept=".xls,.xlsx" drag action="#" :limit="1" :auto-upload="true"
    :http-request="upAndDowndoad"
    :before-upload="beforeUpload" 
    :on-exceed="handleExceed"
    :file-list="fileList">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
    </div>
    <div class="el-upload__tip" slot="tip">* 请上传少于1000行的excel文件</div>
</el-upload>

 * action为必选参数，可写成action=“#” 避免报错

upAndDowndoad(params) {
    // 获取文件 通过FormData将文件转化为二进制流的形式传给后端
    let form = new FormData()
    form.append('file', params.file)
    upAndDownload(form).then((res) => {
        let contentType = res.headers['content-type']
        let contentDisposition = res.headers['content-disposition']
        if (contentType.indexOf('application/json') !== -1) {
        } else {
            contentDisposition = contentDisposition.split(';')[1]
            let filename = contentDisposition.split('=')[1]
            let filenameStr = window.decodeURI(filename.split(',')[0], 'utf-8')
            const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
            const link = document.createElement('a')
            const href = window.URL.createObjectURL(blob)
            // 后台再header中传文件名
            link.href = href
            link.download = filenameStr
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(href) // 释放掉blob对象
        }
    })
        .then(() => {
            this.fileList = []  // 将文件列表置空
        })
        .catch((res) => {
            this.fileList = []  // 将文件列表置空
        });
},

// 接口文件
export function upAndDownload(data) {
    return request({
        url: '/xxx',
        responseType: "arraybuffer",
        method: 'post',
        data
    })
}

同时可以使用beforeUpload限制文件上传类型，用handelExceed限制文件上传数量

beforeUpload(file) {
    let legalName = ['xlsx', 'xls']
    // 拿到后缀名
    let name = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length)
    if (legalName.includes(name)) {
        // console.log(legalName.includes(name));
    } else {
        this.$message.warning('文件格式不对，仅限xls和xlsx')
        return false
    }
},
handleExceed(files, fileList) {
    this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length } 个文件`
    );
},

感谢观看，有什么问题的话，欢迎指出ᕦ(･ㅂ･)ᕤ