/*htnl*/
<view class="img_lists">
<image @click="chooseFile" src="../../static/uploadImg.png"></image> //点击这张图片会调起函数
//循环coverImg就可以显示小图,点击即可实现预览效果
<image v-for="(item,i) in coverImg" :src="item" :key="i" @click="previewImg(item)"></image>
</view>
//js
//location.reload() //可以刷新页面,可以在提交数据成功后使用
export default {
data() {
return {
coverImg: [], //存放上传图片的数组
}
},
method: {
//上传图片
async chooseFile() {
await uni.chooseImage({
count: 1,
success: res => {
this.coverImg = res.tempFilePaths
}
});
}
},
//点击预览图片
previewImg(current,) {
uni.previewImage({
current, //当前的图片路径必填
urls this.coverImgSrc, //数组文件路径必填
loop: true, //循环在5+app才有效
indicator: "default" //指数器同样也是5+app有效
})
},
//图片转base64
async urlTobase64(url) {
let res = await new Promise((resolve) => {
uni.request({
url: url, //要转换的url
method: 'GET',
responseType: 'arraybuffer',
success: res => {
resolve(res)
}
})
})
let base64 = wx.arrayBufferToBase64(res.data);
base64 = `data:image/jpeg;base64,${base64}` //要加上data:image/jpeg;base64, 这个前缀才能显示
console.log(base64)
},
function upAudioFile(){
let res= await new Promise((resolve) => {
uni.chooseFile({
count: 1,//上传数量,最大99
extension: ['.mp3'], //限定上传格式
success: res => {
resolve(res)
}
});
})
console.log(res)
this.baseAudioFile = await this.urlTobase64(res.tempFilePaths[0]) //音频文件也可以处理成base64格式传给后端
},
}