当前位置:网站首页>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 
                                 },

}


原网站

版权声明
本文为[Vue sauce]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/02/202202270557115520.html