vue上传文件的坑

在这个地方浪费了我两天时间，必须总结一下经验

aaa(e) {
      console.log('e.target.files')
      console.log(e.target.files)
    },

这是第一种获取file的方式e.target.files，这个打印出来

这段代码放在提交的方法里面

第二种 document.getElementById('uploadFile').files
第三种 this.$refs.file.files

this.files = document.getElementById('uploadFile').files
console.log('werqwetgbf')
console.log(this.files)
console.log('1111')
console.log(this.$refs.file.files)

打印

打印出来没错，这里提交时候出错了

报错

"Failed to convert property value of type 'java.lang.String' to required type 'org.springframework.web.multipart.MultipartFile[]' for property 'inputFile'; nested exception is java.lang.IllegalStateException: Cannot convert value of type 'java.lang.String' to required type 'org.springframework.web.multipart.MultipartFile' for property 'inputFile[0]': no matching editors or conversion strategy found"

这里我百度了一下
原来是post传参方式不对

post里面的数据放在params里面，这样是有问题的，在使用axios时，要注意到配置选项中包含params和data两者，以为他们是相同的，实则不然。
因为params是添加到url的请求字符串中的，用于get请求。
而data是添加到请求体（body）中的， 用于post请求。

然后我把params改为了data，后台还是接收不到，查阅了很多资料，需要把Content-Type为application/x-www-form-urlencoded，
jquery在执行post请求时，会设置Content-Type为application/x-www-form-urlencoded，所以服务器能够正确解析，而使用原生ajax、axios请求时，如果不显示的设置Content-Type，那么默认是text/plain，这时服务器就不知道怎么解析数据了，所以才只能通过获取原始数据流的方式来进行解析请求数据。

网上百度 的解决办法：
https://blog.csdn.net/hefeng6500/article/details/80322149
第一种

二、使用qs
安装qs,在 main.js里引入

import axios from 'axios';
import qs from 'qs';
Vue.prototype.$qs = qs;

在vue组件里面请求方法

let postData = this.$qs.stringify({
    key1:value1,
    key2:value2,
    key3:value3,
});
this.$axios({
    method: 'post',
    url:'url',
    data:postData
}).then((res)=>{
    
});

另外做个对比

未转换data格式的请求参数：

转换data后的的请求参数：

---

看我操作

首先使用第2种
npm install qs --save

这个是因为没安装qs报错

安装了以后，还是500


第1种：
选择

首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。
很多时候，我们用 Ajax 提交数据时，也是使用这种方式。例如 JQuery 和 QWrap 的 Ajax，Content-Type 默认值都是「application/x-www-form-urlencoded;charset=utf-8」。
https://blog.csdn.net/qq_39258552/article/details/83026071


400 Request 由于客户端请求有语法错误，不能被服务器所理解。
看来都不好使呢?

传个别的试试？

500 Internal Server Error 服务器发生不可预期的错误，导致无法完成客户端的请求。

但是我这样提交是可以的

let teldata = new FormData()
teldata.append('environment', this.value1) // 环境
teldata.append('service', this.value2) // 服务态度
teldata.append('detail', this.value3) // 详情描述
teldata.append('anonymous', newcheck) // 是否匿名
teldata.append('mobile', this.phone) // 手机号

this.axios.post('/api/feedback/submit', teldata).then(
  function(res) {
    console.log(res)
    if (res.data.status === 200) {
      console.log('提交成功')
       // this.$router.push('/main')
    } else {
      console.log('请求失败')
    }
  },
  function(error) {
    console.log('请求出错', error)
  }
)

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryGWao7cbSwH4qdXGp

Content-Type 里指明了数据是以 mutipart/form-data 来编码

teldata.append('inputFile', this.$refs.file.files)