vantUI上传文件组件uploader无法正常回显图片问题

背景

使用vantUI中的uplaoder组件进行图片上传，并要回显图片，后续可对图片进行增加和删除操作。

问题

由于请求回显图片接口的时候，后台返回的字段跟vantUI中uploader组件所需要的数据字段不一样，所以我们需要对返回的数据进行初始化

//fileList为uploader组件绑定的值
  const initfileListForm = (unInitFileList: any) => {
    if (unInitFileList.length > 0) {
      for (let i = 0; i < unInitFileList.length; i++) {
        let item = unInitFileList[i]
        item = {
          id: item.id,
          name: item.name,
          type: item.type,
          url: item.url,
          file: new File([], item.name, {})
        }
        fileList.value.push(item)
      }
    }
  }

结果界面上没办法显示正确的图片，而是显示了文件和文件名，这显然不是我们要的结果。
但是当我们把图片的url直接放在浏览器上去访问的时候，图片是可以直接显示的，说明后台那边问题，问题出在前端这边。

原因

那为什么在浏览器上能直接访问，在vantUI中的uploader就不行了呢
原因是浏览器会根据相应中的Content-Type字段去判断这个响应的资源是什么类型，进而对它进行不同的处理，如果是image等格式，就会把它显示在浏览器上页面上，如果是需要下载的资源就会把它下载下来。
由于后端返回的图片路径没有后缀名，浏览器可以根据content-type去给它做对应的处理，不过在vantUI中的uploader中就没有这个功能了，所以我们需要给它加上一个isImage属性，并它设置为true，来告诉组件这个资源是图片。

//fileList为uploader组件绑定的值
  const initfileListForm = (unInitFileList: any) => {
    if (unInitFileList.length > 0) {
      for (let i = 0; i < unInitFileList.length; i++) {
        let item = unInitFileList[i]
        item = {
          id: item.id,
          name: item.name,
          type: item.type,
          isImage:true,
          url: item.url,
          file: new File([], item.name, {})
        }
        fileList.value.push(item)
      }
    }
  }

VantUI中的uploader上传文件组件回显时，如果图片没有带特定的格式后缀，那我们需要加上一个isImage属性，告诉组件该资源为图片，才能正确渲染图片。