一次在axios中实施文件上传时出现了问题。 我觉得我对上传还不太了解,所以决定好好了解这个知识。
首先列举问题:
我在使用FormData实现的上传。 移动浏览器的版本一般较高,因此不考虑兼容性问题。
代码如下。
变更文件(file ) {var forms=new FormData ) var configs headers : (content-type ' : ) multipart/form-dorm ) forms.append('file ',file.target.files[0] ) this.axios.post ) this.$config.uploadimg,forms,configs
因为是上传的文件,所以我们将headers的content-type设置为multipart/form-data。 没有问题,但测试发现了错误。
也没有账单。
请求体和请求类型不同吧。 请求类型必须设置为form-data,请求体必须是文件。 不是文件吧?
以前对axios进行过请求拦截,我突然想是不是那里改变了请求体。
axios.interceptors.request.use (config )={vue.$vux.loading.show ) text:'loading'}if ) config.show }else{ config.data=config.data; } }返回配置;() error ) ) returnpromise.reject(error ); ); 果然! 对象返回到了这里。 如果消除监听就好了。
既然找到了问题的原因,那该怎么解决呢? 这里的拦截是参数序列化的,如果不写在这里,就必须写所有的接口请求,这不是很麻烦吗?
看看是不是笨蛋,只有一种情况需要qs序列化,那就是type是应用程序/x-www-form-urlencoded。
因此,可以将默认类型设置为应用/x-www-form-urlencoded
axios.defaults.headers [ ' content-type ' ]=' application/x-www-form-urlencoded ';
然后判断一个就可以了。
如果为了打开水壶而需要上传文件,则可以分别设置type,这样就无法进行判断。
注:如果不设置axios的默认类型,axios将根据传递的参数自动选择使用哪个类型。