antd upload组件不能显示参数图片缩略图

发表于 更新于 分类于 本文字数： 287 阅读时长 ≈ 1 分钟

在使用ant-design-vue的upload组件时，无法显示加密图片，经过测试，凡是带参数的图片地址都无法显示缩略图。

base64

这个组件是基于ant-design改写的，在issues中发现了解决办法 #10102

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 *  将图片转换成base64
 * @param {String} url 图片地址
 */
export const base64Url = function (url) {
  let xhr = new XMLHttpRequest()
  xhr.onload = function () {
    let reader = new FileReader()
    reader.onloadend = function () {
      self.postMessage(reader.result) //web worker 通信
    }
    reader.readAsDataURL(xhr.response)
  }
  xhr.open('GET', url)
  xhr.responseType = 'blob'
  xhr.send()
}

通过ajax获取图片，并将图片转为base64。

Web Worker

但是由于我开发的业务页面中有大量图片，如果每个图片都这样操作，页面会有些卡顿。所以需要进行优化。

我选择使用Web Worker，关于Web Worker可以查看阮一峰老师的文章：

创建一个生成Web Worker的函数：

1
2
3
4
5
6
7
8
9
10
11
/**
 * 创建web worker
 * @param {Function} f 要在worker中执行的函数
 * @param {Strint} args 函数参数
 */
export const createWorker = (f, args) => {
  var blob = new Blob(['(' + f.toString() + ')("' + args + '")'])
  var url = window.URL.createObjectURL(blob)
  var worker = new Worker(url)
  return worker
}

调用

1
2
3
4
5
6
let myWorker = createWorker(base64Url, url)
// 监听message事件
myWorker.onmessage = (data) => {
  console.log(data.data)  //打印转换后的base64
  myWorker.terminate()  //销毁 web worker
}