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 = falsethis.$nextTick(() => {this.imgList = imgList})})}

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