当前位置:网站首页>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
},
}
边栏推荐
- Free screen recording software captura download and installation
- Echart折线图:多条折线图每次仅展示一条
- Leetcode- detect uppercase letters - simple
- Sqlplus connection failure
- Leetcode- keyboard line - simple
- PHP redis makes high burst spike
- Echart柱状图:堆叠柱状图value格式化显示
- The Boys x PUBGMOBILE 联动火热来袭!来看最新游戏海报
- 2021-11-04 implementation of binary search
- @The detailed explanation of configurationproperties and the problem that all properties of the entity bean modified by this annotation are null after injection are solved
猜你喜欢
MySQL stored procedure
Custom view - extensible collapsexpendview
Software testing - Summary of common interface problems
1+1 > 2, share creators can help you achieve
Status management --provider
Wechat applet: click the event to obtain the current device information (basic)
After clicking the uniapp e-commerce H5 embedded applet, the page prompts "the page iframe does not support referencing non business domain names"
Echart line chart: when multiple lines have the same name, the legend is still displayed
A glimpse of [wechat applet]
Intelligent digital asset management helps enterprises win the post epidemic Era
随机推荐
js-bom
Wechat applet: click the event to obtain the current device information (basic)
Echart折线图:当多条折线图的name一样时也显示不同的颜色
Adding classes dynamically in uni app
Turn to 2005
Swift property property
[MySQL] basic knowledge review
Leetcode- divide candy - simple
MySQL trigger
超有范的 logo 在线设计制作工具
Binary search
【DP之01背包】
AI实现亲人“复活”|老照片修复|老照片上色,免费APP推荐
Echart折线图:多条折线图每次仅展示一条
Test logiciel - résumé des FAQ d'interface
Data conversion analysis tool
Introduction to USB learning (I) -- Dongfeng night flower tree
[DP 01 backpack]
杨辉三角形详解
MySQL stored procedure