0


使用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 } 个文件`
    );
},

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

标签: vue.js 前端 elementui

本文转载自: https://blog.csdn.net/WX_nbclass/article/details/127257984
版权归原作者 用户11 所有, 如有侵权,请联系我们删除。

“使用element-ui的el-upload进行excel文件上传与下载”的评论:

还没有评论