<template>
<view class="user">
<button @click="chooseImage">上传图片</button>
<button @click="upload">提交</button>
<image v-for="(item,index) in imgSrc" :key="index" :src="item" mode=""></image>
</view>
</template>
<script>
export default {
data() {
return {
imgSrc:[],
}
},
methods: {
chooseImage() {
if(this.imgSrc.length >= 3){
uni.showToast({
title:'上传图片数量已大于3张'
})
return
}
var _this = this
uni.chooseImage({
success(res) {
console.log(res)
if(res.tempFilePaths.length>3){
uni.showToast({
title:'图片数量不能大于3张',
icon:'none'
})
return
}
var item = res.tempFiles.find(item=>{
return item.size > 1024*1024
})
if(item){
uni.showToast({
title:'单张图片大小不得高于1M',
icon:"none"
})
return
}
_this.imgSrc.push(...res.tempFilePaths)
}
})
},
upload(){
this.imgSrc.forEach(item=>{ //因为有3张图片,所以上传时循环上传
uni.uploadFile({
url:'',//这里写自己的接口
filePath:item,
name:'file',
success(res){
console.log(res)
}
})
})
}
}
}
</script>
uniapp微信小程序上传多张照片,每张图片不得大于1M
于 2022-08-12 08:43:09 首次发布