当前位置:网站首页>van-uploader上传图片,使用base64回显无法预览的问题
van-uploader上传图片,使用base64回显无法预览的问题
2022-07-31 06:10:00 【布偶乱跑】
1.今天在开发过程中,遇到了使用vant上传组件,回显无法预览的问题,在搜索后,解决方法如下:
- html:
<van-uploader v-model="fileList"
accept='.jpg,.jpeg,.png'
:before-read="beforeRead"
:after-read="afterRead"
:max-size="10000 * 1024"
@oversize="onOversize"
:before-delete="beforeDel" />
- js
fileNameList.split(',').forEach(v => {
// 遍历后端返回的文件名
this.$http.secondParty.getImageByName({
fileName: v }).then(k => {
// 文件名请求到base64格式文件
// 图片base64转url
let img = 'data:image/jpeg;base64,' + k.data
let imgurl = this.base64ImgtoFile(img)
console.log('imgurl===', imgurl)
let url =
window.webkitURL.createObjectURL(imgurl) ||
window.URL.createObjectURL(imgurl)
// 创建图片地址
this.fileList.push({
content: 'data:image/jpeg;base64,' + k.data,
File: imgurl,
name: v,
status: 'done',
message: '上传中',
isImage: true,
url
})
})
})
- base64转文件
base64ImgtoFile(dataurl, filename = 'file') {
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const suffix = mime.split('/')[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${
filename}.${
suffix}`, {
type: mime
})
},
边栏推荐
猜你喜欢
LeetCode:952. 按公因数计算最大组件大小【欧拉筛 + 并查集】
嵌入式系统驱动初级【2】——内核模块下_参数和依赖
【编程题】【Scratch三级】2022.03 冬天下雪了
【科普向】5G核心网架构和关键技术
一文读懂 MongoDB 和 MySQL 的差异
测试 思维导图
【面试:并发篇37:多线程:线程池】自定义线程池
2022.07.18_每日一题
Project exercise - memorandum (add, delete, modify, check)
Zotero | Zotero translator plugin update | Solve the problem that Baidu academic literature cannot be obtained
随机推荐
2022.07.18_每日一题
【解决】mysql本地计算机上的MySQL服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止
Postgresql source code learning (34) - transaction log ⑩ - full page write mechanism
leetcode 406. Queue Reconstruction by Height 根据身高重建队列(中等)
强化学习科研知识必备(数据库、期刊、会议、牛人)
How to choose a suitable UI component library in uni-app
Moment.js common methods
2022.07.20_每日一题
360推送-360推送工具-360批量推送工具
文件 - 05 下载文件:根据文件Id下载文件
360 push-360 push tool-360 batch push tool
postgresql源码学习(34)—— 事务日志⑩ - 全页写机制
【Star项目】小帽飞机大战(八)
熟悉而陌生的新朋友——IAsyncDisposable
【科普向】5G核心网架构和关键技术
shell之条件语句(test、if、case)
线程唤醒机制
2022.07.29_每日一题
文件 - 07 删除文件: 根据fileIds批量删除文件及文件信息
【微服务】(十六)—— 分布式事务Seata