当前位置:网站首页>van-uploader uploads images, and cannot preview the image using base64 echo
van-uploader uploads images, and cannot preview the image using base64 echo
2022-07-31 07:40:00 【puppet running】
1.今天在开发过程中,遇到了使用vant上传组件,The echo cannot be previewed,在搜索后,解决方法如下:
- 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 => {
// Iterate over the filenames returned by the backend
this.$http.secondParty.getImageByName({
fileName: v }).then(k => {
// filename request tobase64格式文件
// 图片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
})
},
边栏推荐
猜你喜欢
【面试:并发篇37:多线程:线程池】自定义线程池
Conditional statements of shell (test, if, case)
金融租赁业务
03-SDRAM: Write operation (burst)
零样本学习&Domain-aware Visual Bias Eliminating for Generalized Zero-Shot Learning
【网络攻防】常见的网络攻防技术——黑客攻防(通俗易懂版)
Log4net 思维导图
Automatic translation software - batch batch automatic translation software recommendation
DAY18:Xss 靶场通关手册
2022.07.12_每日一题
随机推荐
Obtaining server and client information
【网络攻防】常见的网络攻防技术——黑客攻防(通俗易懂版)
leetcode 406. Queue Reconstruction by Height 根据身高重建队列(中等)
R——避免使用 col=0
[PSQL] SQL基础教程读书笔记(Chapter1-4)
Log4net 思维导图
知识、创新、回报。
Third-party library-store
基于LSTM的诗词生成
2022.07.22_每日一题
2022.07.12_每日一题
tidyverse笔记——管道函数
文件 - 03 下载文件:根据文件id获取下载链接
【微服务】(十六)—— 分布式事务Seata
Postgresql source code learning (34) - transaction log ⑩ - full page write mechanism
【C语言项目合集】这十个入门必备练手项目,让C语言对你来说不再难学!
项目 - 如何根据最近30天、最近14天、最近7天、最近24小时、自定义时间范围查询MySQL中的数据?
Jobject 使用
小实战项目之——吃货联盟订餐系统
【Star项目】小帽飞机大战(八)