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

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

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

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

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

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

<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 实现,以下:

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

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

感谢观看,有什么问题的话,欢迎指出ᕦ(・ㅂ・)ᕤ文章来源地址https://www.toymoban.com/news/detail-503640.html

到了这里,关于使用element-ui的el-upload进行excel文件上传与下载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包