uniapp 图片点击预览删除上传单张/多张图片

图片点击预览删除上传单张/多张图片"/>

uniapp 图片点击预览删除上传单张/多张图片

1.单张图片预览

<image :src="userInfoBbusiness"  @click="previewImg(userInfoBbusiness)"></image>methods: {//单张图片预览previewImg(imgurl) {let _this = this;let imgsArray = [];imgsArray[0] = imgurluni.previewImage({current: 0,urls: imgsArray});},
}

2.多张图片预览（并且可以上传、删除）

	<view class='image_list '><!--1.显示图片--><view class="item" v-for="(item,index) in imageList" :key="index"><image :src="host+item" mode="widthFix"></image><view class="del" @click="delFun(index)">删除</view></view><!--2.上传图片（可多张--这里限制上传3张）--><view class="image_box" v-if="imageList.length<3" @click="uploadFun('imageList')"><view class="image_box_item"><image src="../../static/images/img_sct@2x.png" mode="heightFix"></image><view>点击上传</view></view></view></view><!--3.上传图片（单张头像）--><view class="upload_con" @click="uploadFun('avatar')"><view class="upload_view"><image :src="avatar ? host+avatar:'../../static/images/icon_txsc@2x.png'" mode="aspectFit" class="upLoadImg"></image><view class="upload_text">点此上传</view></view></view>data() {return {host: this.$api.hostImages,  imageList:[],}},methods: {// 1.多张图片预览previewImg(index) {let that= this;let imgsArray = [];for (let i = 0; i < that.imageList.length; i++) {if (that.imgUrlList[i].videoUrl == "") {imgsArray.push(this.$api.hostImages+that.imageList[i].imgUrl);}}// #ifdef MPuni.previewImage({current: index - 1,urls: imgsArray,});// #endif// #ifndef MPuni.previewImage({current: index - 1,urls: imgsArray,});// #endif},// 1.删除图片delFun(index) {console.log("删除", index)this.imageList.splice(index, 1)},//2.3.上传图片uploadFun(type) {let that = thisuni.chooseImage({count: 3, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function(res) {console.log("JSON", res);const tempFilePaths = [];res.tempFilePaths.forEach((item) => {uni.uploadFile({url: that.$api.host + that.$url.url.upload, //仅为示例，非真实的接口地址filePath: item,name: 'file',header: {token: uni.getStorageSync('token')},success: (uploadFileRes) => {console.log('uploadFileRes', JSON.parse(uploadFileRes.data).initialPreview[0]);if (type == 'imageList') {//多张图片that.imageList.push(JSON.parse(uploadFileRes.data).initialPreview[0]);} else {//单张头像that.avatar = JSON.parse(uploadFileRes.data).initialPreview[0]; //这里获取了单张的图片路径// that.person_image = JSON.parse(uploadFileRes.data);}// that.fileList.push(JSON.parse(uploadFileRes.data).data);console.log("that.fileList==>", that.fileList)}});})},fail: function(err) {console.log(err)}});},//上传结束}<style>.image_list .item{position: relative;}.image_list .del{width: 80rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;position: absolute;top: 30rpx;right: 30rpx;background-color: rgba(0, 0, 0, 0.4);color: #FFF;border-radius: 12rpx;font-size: 24rpx;}</style>