项目本地文件上传后台并返回携带数据的文件

最新推荐文章于 2023-09-20 20:41:35 发布

豆腐oh

最新推荐文章于 2023-09-20 20:41:35 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js javaScript 文章标签：前端

本文链接：https://blog.youkuaiyun.com/passWordEnterX/article/details/129424276

vue.js 同时被 2 个专栏收录

10 篇文章

订阅专栏

javaScript

5 篇文章

订阅专栏

场景

xlsx文件导出功能,按照当前查询条件导出汇总信息

接口传参

FormDate格式{

...search， //携带查询参数

file：new File() //本地文件数据源

}

获取本地文件流

文件需放在public文件夹下

原因是vue-cli3.0之后创建的项目静态资源都放在了根目录下的public目录下，因此需要将文件建在public目录下即可

使用axios发送get请求回去数据源,因为接口传参时需要file类型，所以要把获取到的数据源转换成File类型

axios({
            method: 'get',
            headers: {
                'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq'
            },
            url: `${process.env.BASE_URL}/static/demo.xlsx`,
            responseType: 'blob'
        }).then(function (response) {
            if (response) {
                that.files = new File([response.data], 'demo.xlsx')
            }
        })

创建FormData对象包裹入参

 let FormData = new FormData()
 formData.append('file', this.files)
 for (const key in this.search) {
                formData.append(key, this.search[key])
   }

接口写入FormData参数完成调用