ant design vue upload图片上传使用和二次封装《第一章使用》

起因：项目里面一大堆图片上传，并且同时会有几个图片上传同时存在，花了半天时间研究了a-upload组件图片上传的流程，但是又觉得重复代码如果一个页面同时出现几个图片上传或者项目中很多就会写很多重复的逻辑，于是就有了我对他的二次封装。

首先来看看upload如何使用吧。

action：这个属性相当于给你发了一个post的请求 并给你的请求头Content-Type自动更改为multipart/form-data类型也只有必须更改为这个类型才能进行图片上传，一般项目中请求的Content-type格式都为application/json

:file-list：这个属性是当你上传了图片之后将通过他的方法获取一个对象将这个对象存到file-list绑定的属性中 下面的图片展示就会出来

很多人进行到这里应该发现了一个问题，后台给我返回报错没有令牌 code码也给我返回500了 我知道你很急但你先别急。在项目中我们一般都会在请求拦截器中设置请求头并带上用户的Token 如果仔细看看action给我们发送的请求就不难发现我们设置的带token的请求头并没有被添加进去，这个时候有人看了下别的请求就会思考一个问题我设置的请求头在别的请求中都带上了啊为什么这个请求里面就没有了呢。其实解决办法也很简单，那就是:headers这个属性

你只需在数据中将cookie中的token取出来给 并按照我这个格式就能成功将请求头带上了

接下来就是最重要的（如何将上传的文件传进数据中并展示出来呢？）

先来看看官方文档是怎么说的吧：

官方是给我们提供了一个change事件来获取上传的文件 也是提供了三个参数供我们获取我们所需要的东西。

当你在这个方法里面去console.log fileList就会发现他是一个数组套着的对象里面正好就是我们需要给展示数据赋值的东西，接下来我们只需要根据我们需要的格式进行一个判断后给它赋值就可以了

我这边是只允许上传png\jpg\jpeg\gif格式 并做了一个判断只允许上传一张图片否则就给用户弹出一个警告。

在此之前还需要做一个判断，如果用户点击的是删除按钮 fileList 里面将会是一个空数组此时就做一个判断如果length等于0的话就将展示的数据清空：

此时可能有些人还有一个疑问 如果我想获取后台给我返回的图片url地址我该怎么去获取呢？ 其实ant design 给我们了一个file属性 在里面就可以获取到请求返回的后台数据，其实这个刚才放出来的官方说明上面也有说明file：

这一篇就先说一下图片上传upload的使用，等我有空了给你们写第二篇使用mixin给他进行二次封装，先去赶项目了。。。（如果有人很急的话就戳一下我）。