在uniapp中使用uview封装图片上传组件完整代码

最新推荐文章于 2025-02-20 17:20:58 发布

wgb0409

最新推荐文章于 2025-02-20 17:20:58 发布

阅读量2.5k

点赞数 2

分类专栏： uview 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/wgb0409/article/details/122327193

版权

这是一个基于Vue的yh-uploadimage组件，用于实现图片上传功能。组件内部使用了u-row和u-col布局，支持图片预览、删除以及上传成功后的回调。图片上传的地址、限制数量、文件类型等参数可以通过props传递，同时支持文件服务器Code和文件路径的配置。当图片上传完成后，会触发input事件，将上传的图片URL以逗号分隔的形式回传。

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

yh-uploadimage.vue 组件

<template>
	<view class="yh-uploadimage">
		<u-row gutter="10">
			<u-col v-if="!showUploadList" span="4" v-for="(item, index) in fileList">
				<view class="pre-item" :key="index">
					<image @tap="previewImage(index)" class="pre-item-image"
						:src="FormatDFSUrl(item.url)" mode="aspectFill"></image>
					<view class="del u-f-ac u-f-ajc" @click="removeFun(index)" v-if="!preview">
						<u-icon name="minus" size="26" color="white"></u-icon>
					</view>
				</view>
			</u-col>
			<u-col span="4" v-if="fileList&&fileList.length<limitNumber&&!preview">
				<u-upload :custom-btn="true" ref="uUpload" :show-upload-list="showUploadList" :action="action" :max-count="limitNumber"
					@on-success="successFun">
					<view slot="addBtn" class="slot-btn u-f-ac u-f-ajc" hover-class="slot-btn__hover"
						hover-stay-time="150">
						<

最低0.47元/天解锁文章