首页 > 编程知识 正文

纯html上传文件,vue axios跨域请求

时间:2023-05-04 11:09:52 阅读:127538 作者:3320

一次在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将根据传递的参数自动选择使用哪个类型。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。