uniapp上传和长按删除图片

最新推荐文章于 2024-07-02 10:45:42 发布

蜡笔大杺

最新推荐文章于 2024-07-02 10:45:42 发布

阅读量414

点赞数

本文链接：https://blog.csdn.net/qq_44871531/article/details/127496449

版权

该博客详细介绍了如何在uni-app中实现图片上传和删除功能。通过`uni.chooseImage`选择图片，限制最多上传6张，并使用`uni.uploadFile`将图片上传到服务器。当用户触摸图片时，会显示删除确认弹窗，点击确认则从数组中移除图片。博客涉及前端开发中的图片处理和用户交互技术。

摘要由CSDN通过智能技术生成

<view class="upload" v-for="(item, index) in list" :key="item">
		<image :src="item" mode="" style="margin-right: 36rpx;" @touchstart.prevent="touchstart(index)"
			@touchend.prevent="touchend">
	</image>
</view>```

js代码
1.上传
		// 拍照
			getPotohos() {
				var _this = this;
				if (_this.list.length >= 6) {
					return _this.$.toast("最多只能上传6张")
				}
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(chooseImageRes) {
						console.log("img1", chooseImageRes);
						for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
							let tempFilePaths = chooseImageRes.tempFilePaths[i];
							console.log("tempFilePaths", tempFilePaths);
							uni.uploadFile({
								url: '后端服务器上传接口',
								filePath: tempFilePaths,
								name: 'file',
								formData: {},
								success: uploadFileRes => {
									let img = JSON.parse(uploadFileRes.data).data;
									console.log("img", img);
									_this.list.push(img)
								}
							});
						}


					}
				});
			},
2.删除
touchstart(index) {
				let that = this;
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					uni.showModal({
						title: '删除',
						content: '请问要删除本图片吗？',
						success: async function(res) {
							if (res.confirm) {
								//   从数组中删除图片
								that.list.splice(index, 1);
								// 更新数组长度，使提示上传的图片再次显示
								// that.picPathListLength = that.list.length;
							} else if (res.cancel) {
								console.log("用户点击取消");
							}
						}
					});

				}.bind(this), 500);
			},
			touchend() {
				clearInterval(this.Loop);
			},