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

在使用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
}
如果觉得对您有帮助,请我喝杯咖啡可好☕️
Disqus 加载中...

如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理