当前位置:网站首页>Uniapp (upload local pictures, preview pictures, convert Base64 format, upload audio files)
Uniapp (upload local pictures, preview pictures, convert Base64 format, upload audio files)
2022-06-13 06:12:00 【Vue sauce】
/*htnl*/
<view class="img_lists">
<image @click="chooseFile" src="../../static/uploadImg.png"></image> // Clicking on this picture will bring up the function
// loop coverImg You can display a small picture , Click to preview
<image v-for="(item,i) in coverImg" :src="item" :key="i" @click="previewImg(item)"></image>
</view>
//js
//location.reload() // You can refresh the page , It can be used after data submission is successful
export default {
data() {
return {
coverImg: [], // An array of uploaded pictures
}
},
method: {
// To upload pictures
chooseFile() {
await uni.chooseImage({
count: 1,
success: res => {
this.coverImg = res.tempFilePaths
}
});
}
},
// Click preview image
previewImg(current,) {
uni.previewImage({
current, // The current picture path is required
urls this.coverImgSrc, // Array file path is required
loop: true, // The cycle is 5+app It works
indicator: "default" // The indexer is also 5+app It works
})
},
// Picture turn base64
async urlTobase64(url) {
let res = await new Promise((resolve) => {
uni.request({
url: url, // To convert url
method: 'GET',
responseType: 'arraybuffer',
success: res => {
resolve(res)
}
})
})
let base64 = wx.arrayBufferToBase64(res.data);
base64 = `data:image/jpeg;base64,${
base64}` // To add data:image/jpeg;base64, This prefix can be displayed
console.log(base64)
},
function upAudioFile(){
let res= await new Promise((resolve) => {
uni.chooseFile({
count: 1,// Upload quantity , Maximum 99
extension: ['.mp3'], // Limited upload format
success: res => {
resolve(res)
}
});
})
console.log(res)
this.baseAudioFile = await this.urlTobase64(res.tempFilePaths[0]) // Audio files can also be processed into base64 The format is passed to the back end
},
}
边栏推荐
- Annotation only integration SSM framework
- Not in the following list of legal domain names, wechat applet solution
- Commit specification
- [compilation and assembly link] coff file and structure description
- Uni app provincial and urban linkage
- Data conversion analysis tool
- php 分布式事务 原理详解
- Waterfall flow layout of uni app Homepage
- Missing tag identification in cots RFID systems: bringing the gap between theory and Practice
- Swift property property
猜你喜欢

AI实现亲人“复活”|老照片修复|老照片上色,免费APP推荐

推荐扩容工具,彻底解决C盘及其它磁盘空间不够的难题

MySQL stored procedure

You should consider upgrading via

Hbuilderx: installation of hbuilderx and its common plug-ins

本地文件秒搜工具 Everything

Echart histogram: echart implements stacked histogram

【DP之01背包】

Echart histogram: X-axis displays value, Y-axis displays category

Echart rectangular tree diagram: simple implementation of rectangular tree diagram
随机推荐
Uniapp mobile terminal uses canvas to draw background convex arc
Leetcode- longest palindrome string - simple
Status management --provider
Leetcode- student attendance record i- simple
Echart histogram: stacked histogram displays value
Leetcode- hex number - simple
Intelligent digital asset management helps enterprises win the post epidemic Era
Uniapp dynamically shows / hides the navigation bar return button
Leetcode- key formatting - simple
【美团笔试题】
1016 part a+b (15 points)
Data conversion analysis tool
php redis 制作高迸发秒杀
不在以下合法域名列表中,微信小程序解决办法
Not in the following list of legal domain names, wechat applet solution
本地文件秒搜工具 Everything
PHP redis makes high burst spike
Leetcode guessing numbers game - simple
智能数字资产管理助力企业决胜后疫情时代
Turn to 2005