当前位置:网站首页>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
},
}
边栏推荐
- The Boys x PUBGMOBILE 联动火热来袭!来看最新游戏海报
- Add attributes in storyboard and Xib (fillet, foreground...) Ibinspectable and ibdesignable
- Leetcode- number of words in string - simple
- Huawei developer certification and deveco studio compiler Download
- PHP redis makes high burst spike
- Wechat applet: basic review
- Leetcode- divide candy - simple
- A brief analysis of the overall process of view drawing
- 微信小程序:点击事件获取当前设备信息(基础)
- 免费录屏软件Captura下载安装
猜你喜欢
Pod libwebp error reporting solution
本地文件秒搜工具 Everything
[turn] explain awk (1)__ Awk Basics_ Options_ Program segment parsing and examples
不在以下合法域名列表中,微信小程序解决办法
软件测试——接口常见问题汇总
二分查找
The boys x pubgmobile linkage is coming! Check out the latest game posters
Detailed explanation of PHP distributed transaction principle
Experience of redis installation under Linux system (an error is reported at the same time. The struct redis server does not have a member named XXXX)
Wechat applet: basic review
随机推荐
Leetcode- key formatting - simple
【var const let区别】
华为开发者认证与DevEco Studio编译器下载
Uniapp mobile terminal uses canvas to draw background convex arc
Leetcode- reverse string ii- simple
Use of Nacos configuration center
超有范的 logo 在线设计制作工具
本地文件秒搜工具 Everything
Audio stereo to mono (Audio Dual Channel to mono channel)
FusionPBX 安装 —— 筑梦之路
Detailed explanation of Yanghui triangle
万能播放器 PotPlayer 的下载与安装,直播流 m3u8 导入
After MySQL is installed, enter the "net start MySQL" command, and an error is reported that "net" is neither an internal or external command nor a runnable program
【美团笔试题】
AI实现亲人“复活”|老照片修复|老照片上色,免费APP推荐
不在以下合法域名列表中,微信小程序解决办法
Uniapp dynamically shows / hides the navigation bar return button
Echart histogram: echart implements stacked histogram
Security baseline check script - the road to dream
Leetcode- keyboard line - simple