关于下载图片

1. 后端返回的图片链接如下(单张或者多张):

// 单张图片
images: "/api-sysfile/sys/file/download?filePath=2852_一.1.png"
// 多张图片
images: "/api-sysfile/sys/file/download?filePath=2852_一.1.png,/api- 
             sysfile/sys/file/download?filePath=2852_二.2.png"

2.处理如下(写法一:)

let picLists = []
if (images.indexOf('.')) {
       // 多张图片
       picLists = images
       .split(',')
       .map(v => v)
       .filter(item => item)
      } else {
       // 单张图片
        picLists = [images]
        }


let hasDeal = []
      picLists.forEach(e => {
          hasDeal.push(getPic_API(e))
        })

// 通过promise.all 拿到所有的promise实例
let result = await Promise.all(hasDeal )

// this.srcList 绑定到 el-image-viewer中url-list上
 this.srcList = result.map(m => {
          return window.URL.createObjectURL(m)
        })

// getPic_API 是调用后端的接口 拿到返回的blob类型数据
export const getPic_API = url => {
  return request({
    url,
    method: 'get',
    responseType: 'blob'
  })
}

3.写法二:

let picLists = []  // 承载后端返回的images
let imgList = []   // 
let promiseArr = []

picLists = images.split(',')

if(picLists.length){
   picLists.forEach(v=>{
      let p = new Promise((resole, rejcet) => {
            getPic_API(png)
              .then(imgRes => {
                let img = new Image()
                img.src = URL.createObjectURL(imgRes)
                img.crossOrigin = ''
                img.onload = () => {
                  imgList.push(img)
                  resole()
                }
              })
              .catch(err => {
                this.$message.error(err)
                rejcet(errMsg)
              })
          })
         promiseArr.push(p)
   })
  
          // 所有图片下载完成
        Promise.all(promiseArr).then(() => {
          this.loading = false
          this.$nextTick(() => {
            this.imgList = imgList
          })
        })
   }

4.关于window.URL.createObjectURL的用法