uniapp上传（拍照、本地），预览，删除图片

清许～

已于 2022-11-09 10:29:35 修改

阅读量1.3k

点赞数 2

文章标签： uni-app

于 2022-09-26 16:44:19 首次发布

本文链接：https://blog.csdn.net/qq_53590046/article/details/127055859

版权

本文介绍如何在uni-app中实现图片上传、拍照、本地选择、预览及删除功能，包括模板代码、JavaScript逻辑和CSS样式，助力uni-app项目的图片管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下

点击预览效果

代码部分

template代码

<template>
		<view class="addrpage_text">
			<view class="addrimg">
				<view class="upimg">
					<view class="uni-uploader__files">
						<view v-for="(image, index) in imageList" :key="index">
							<view class="uni-uploader__file">
								<view class="delete" @tap="onDeleteClick(index)">
									<text>✖️</text>
								</view>
								<image class="uni-uploader__img" :src="image" :data-src="image" @tap.stop="lookimgbut(index)&#