uni-app项目中实现图片上传、删除回显和预览
<!-- 上传图片操作 -->
<view class="img">
<view class="image" v-for="(item,index) in form.imgurl" :key="index">
<!-- 回显图片 -->
<image :src="item"></image>
<image class="del" src="/static/delete.png" mode="" @click="deleteImg(item)">
</image>
</view>
<view @tap="chooseImage" class="it">上传图片</view>
</view>
<view @click="showView(item.image)">
<image style="width: 100%;height: 200px;" :src="item.image"></image>
</view>
this.form.img = this.form.imgurl.toString()
chooseImage() {
let that = this
uni.chooseImage({
count: 9,
success: (res) => {
const tempFilePaths = res.tempFilePaths;
uni.showLoading()
let uper = uni.uploadFile({
url://上传图片地址
filePath: tempFilePaths[0],
name: 'file',
success: (r) => {
uni.hideLoading()
that.form.imgurl.push(r.data)
},
fail() {
uni.hideLoading()
}
})
uper.onProgressUpdate((res) => {
this.percent = res.progress
})
},
})
},
deleteFun(item) {
uni.showModal({
title: '删除',
content: `确认删除?`,
success: (res) => {
if (res.confirm) {
var index = this.form.imgurl.findIndex(items => {
if (items == item) {
return true
}
})
this.form.img_url.splice(index, 1);
}
}
})
},
showView(image) {
let imgArr = [];
imgArr.push(image);
uni.previewImage({
urls: imgArr,
current: imgArr[0]
})
}