ant design upload 上传图片 回显

VUE Ant Design Vue框架点击上传图片和预览大图

最近做了一个功能，上传图片，点击预览图片的一个功能，在之前的项目上开发的，用的是Ant Design Vue的这个框架，之前没用过这个框架，pc端用的比较多的是element-ui这个框架，而他们说一个项目不能用两个框架，那好，就只能硬着头皮去先熟悉这个框架，然后踩了很多坑

首先我们先找到这个框架，然后选择一种比较符合标准的

我用的是这一个，但是你们发现，我上传一个图片，然后边框是红色的，说明是错的，把这个框架提供的代码粘贴下来，点击上传图片也不行，后来去看了提供的方法，才知道有一个属性，action ，这个属性是图片上传的地址，而我把后台返回的地址复制给它，还是报错啦，下面我们来详细看一下

接着我先把框架提供的代码复制下来，然后修改一下

<a-upload
                  action="/person/uploadFile"
                  list-type="picture"
                  :remove="removeFile"
                  :default-file-list="fileList"
                  :customRequest="customRequest"
                  class="upload-list-inline"
                >
                  <a-button>
                    <a-icon type="upload" />添加图片
                  </a-button>
                </a-upload>

下面说一下fileList和customRequest这两个属性

1. fileList：它是一个数组，里面放的是对象，里面包含的属性有图片的名称，图片的路径，点击放大图片的路径
2. customRequest：这个属性官方的定义是 通过覆盖默认的上传行为，可以自定义自己的上传实现

一.fileList 首先我们现在data里面把他定义一下，要不然会报错

在这里插入代码片
```data() {
    return {
      fileList: [],
  },

二：fileList接受数据

1. 这个上传图片的功能不只是只能上传，而且还可以图片回显，就是请求接口，如果后台给你返回图片的路径，你还要展示出来，没有返回的话，就显示点击上传图片，所以在我们请求接口，返回数据的时候，我们要先拿到图片的路径
2. 首先我们声明一下变量，接受一个对象，然后对象里面定义图片的信息，在我们请求接口拿到路径以后，给图片赋值，最后push到数组中

axios.post('/person/getUcUserByUserId?userId=' + sele.userIdVal).then(res => {
      if (!res.data.card) {
        sele.removeFile()
      }
      const originFileObj = {
        uid: '-1',
        name: '图片',//图片显示的名称
        status: 'done',
        url: res.data.card,//显示图片的路径
        thumbUrl: res.data.card//点击放大图片的路径
      }
      sele.fileList.push(originFileObj)//最后要push到显示的这个数组中

三：customRequest：通过覆盖默认的上传行为，可以自定义自己的上传实现， 这个方法就是我们点击上传图片的方法

customRequest(data) {
      const formData = new FormData()
      formData.append('imageFile', data.file)
      axios.post('/person/uploadFile', formData).then(res => {
        if (res.code === '0') {
          this.retrieval.card = res.data
          const originFileObj = {
            uid: '-1',
            name: '图片',
            status: 'done',
            url: res.data,
            thumbUrl: res.data
          }
          this.fileList.push(originFileObj)
          this.$message.success(res.msg)
        }
      })
    },

传递参数的时候转换了一下，因为后台这边接受的参数是form data的格式，正常的是json格式，通过下面的方法，转换成formdata格式，如果后台没有说要接受什么格式的参数，就不用写下面这个方法，不用转换，直接正常传参就行啦

const formData = new FormData()
      formData.append('imageFile', data.file)

四：通过点击上传图片的这个方法，请求接口，拿到图片的路径，然后push到fileList展示图片的这个数组中，在我们请求接口的时候，拿到接口的后缀，要赋值给上面的action

五：removeFile：这个是删除的方法，当我们点击删除的时候，让fileList这个数组为空就可以啦

//删除的方法
 removeFile() {
      this.fileList = []
      this.retrieval.card = ''
    },