关于el-upload上传图片

今天做项目的时候突然发现自己有上传图片的需求，想着Element自带有上传图片的功能，于是就理所当然的用了起来，后台接口写好了，经过PostMan测试也没有问题，但是一用el-upload就给我提示400，头痛！！！！

幸好我比较聪明（哈哈哈！允许我自夸一下），我们从Element的官方示例代码来看。

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

只能看得懂action标签是什么意思，但是我把我的后台url替代上去却没什么用。由于第一次了解这个标签，仔细看了会官方的属性说明，只有file-list属性让我有些奇怪，但是我后来了解到，当你上传文件成功时。

这些文件属性会被自动保存到fileList中（file-list关联的数组），其实这个时候我最怀疑的时参数名的问题，PostMan是有参数名可填的，但是el-upload没有，所以我一直在找el-load设置参数名的地方，但是我没看到（或者说，其实我想到了另一种方法然后放弃了，哈哈哈！）

（谷歌的）

（这是火狐的）

上面是我在http请求包里看到的请求参数的名称（name=“file”，file就是参数名称，要知道怎么查看请求包，嗯...百度吧...看之前先发送请求，不然没有记录），然后我就在后台接口使用了参数绑定。

然后就能取到MultipartFile的值了，然后就可以正确的进行图片的上传操作，但是首先得保证在PostMan测试时成功的。

如果把参数名绑定到接口，官方的示例代码不用改就可以直接使用了。

说了这么多废话，其实一两句就能说清的，也算是记录一下解决问题的思路吧。

最后还有！！！！

el-upload的参数名设置的属性是通过name属性来设置的。（眼瞎了。。。）

这么写就可以在前台修改参数名称，不用去后台修改了。（这个最重要，上面都是废话。）

因为在遇到这个问题时，在网上没找到什么有用的方法，官方文档又不详细，所以就试着自己去解决了。（还是很简单的）