首页 > 移动平台 > 详细

Vue 项目使用 axios + iview 的 upload 组件实现文件上传功能遇到的问题以及解决方法

时间:2019-09-25 20:07:02      阅读:468      评论:0      收藏:0      [点我收藏+]

问题描述:

需求是使用 iview 的 upload 组件上传文件,解析成功后,展示解析的内容,另外有单独的提交操作,需要把上传的文件 file 放到 data 参数里面一并提交,目前项目对 axios 整体做了封装,普通请求可以使用,但是涉及到需要传递 file 的这种情况就不行了。

解决方案:

首先需要使用到 FormData 对象,let params = new FormData()在 upload 组件的 beforeUpload(file) 钩子中把获取到的文件装入文件对象中,this.params.set(‘file‘,file),最后在提交事件里边加上其他需要传递的参数,this.params.set(‘xx‘,xx),发送请求如下:

this.$axios.post(apiURL,this.param,{
    headers: {
        ‘X-Token‘:  xx,‘X-Version‘:  ‘V2.1.0‘,‘X-Url‘: apiURL
    }
}).then(data=>{
    console.log(‘上传提交‘,data);
}).catch(error=>{
    this.$Message.error({
        content: error,
        duration:3
    })
})

正常发送 post 请求参数我们都会对参数进行序列化,在这里我们不能对参数进行序列化,否则传递的就不是文件,导致提交失败

Vue 项目使用 axios + iview 的 upload 组件实现文件上传功能遇到的问题以及解决方法

原文:https://www.cnblogs.com/web-panpan/p/11586732.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!