使用axios+formdata+vue上传图片遇到后台接受不到图片的值的问题

Posted 2020-10-22 jinrupeng

先直接贴代码

html代码如下：

<input type="file"@change="getFileExpr($event)">
<el-form id="uploadForm" :rules="rules2" method="post" enctype="multipart/form-data">

这个地方我是使用的element ui框架中的form组件 原生的html的form标签也可以，主要添加 id 和指定

method="post" enctype="multipart/form-data"

//onchange 方法 拿到文件名称和文件
getFileExpr(event){
  this.fileName = event.target.files[0].name;
  this.file = event.target.files[0];
},

//关于formdata使用方式请自行搜索
let uploadForm=document.getElementById("uploadForm");
let formData = new FormData(uploadForm); 
formData.append(‘img‘, this.file);

this.$http.post(‘url‘,formData) .then(response => { 
})

 

 通常来说这样就可以了 这个地方的this.$http 是axios全局配置然后导入到vue的prototype 问题出于在全局配置的时候因为post请求是formdata格式的，所以要引入qs这个模块用于格式化data数据，但是如果你是使用上传的话就不要用qs来格式化这个数据了，否则的话后台是接收不到数据的，所以这个判断应该在加一个条件

 //config.data.constructor !== FormData 不等于formdata的情况下 qs数据

if(config.method  === ‘post‘ && config.data.constructor !== FormData){
      config.data = qs.stringify(config.data);
  }

以上就是原因，初识axios的时候需要配置很多东西不像以往的基于jq的ajax，比如需要默认情况下axios请求是json格式而后端需要formdata格式就需要引入qs模块，比如上传图片还要再次加判断这样，遇到这种问题，先看后端报什么错误，如果后端没问题，那么就去找文档、去搜索、先把错误规模逐渐变窄、比如这个问题，最先开始是后端接收不到我上传的图片，只能接收到文字信息，先从fromdata这种查，因为也是第一次用formdata，然后对照网上的案例没有问题，再使用jq的ajax请求，却可以请求得到，说明问题还是出在aixos上，对于新手而言把错误规模逐渐变窄 我认为这是个很好的思想