先直接贴代码
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上，对于新手而言把错误规模逐渐变窄 我认为这是个很好的思想
