uni-app 图片上传插件使用说明

蔚落 2023-05-29 13:01 8阅读 0赞

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70][]

1.下载插件到项目components目录下

2.在page新建图片上传文件

![20191106104054344.png][]

3.复制内容到新建的文件中

参数说明  1.num 上传图片数量限制 2.dataList 上传图片路径集合

<template>
    	<view>
    		<view class="feedback-title" style="background-color: #efeff4;">
    			<text>{
       { title }}</text>
    		</view>
    		<view class="feedback-body feedback-uploader">
    			<view class="uni-uploader">
    				<view class="uni-uploader-head">
    					<view class="uni-uploader-title">点击预览图片</view>
    					<view class="uni-uploader-info">{
       { dataList.length }}/{
       { num }}</view>
    				</view>
    				<view class="uni-uploader-body">
    					<view class="uni-uploader__files">
    						<block v-for="(image, index) in dataList" :key="index">
    							<view class="uni-uploader__file" style="position: relative; width: 198rpx; height: 198rpx;">
    								<image class="uni-uploader__img" style="width: 198rpx; height: 198rpx;" :src="image" @tap="_previewImage(index)"></image>
    								<view class="close-view" @tap="_close(index)">x</view>
    							</view>
    						</block>
    						<view class="uni-uploader__input-box" style="width: 196rpx; height: 196rpx;" v-if="dataList.length < num">
    							<view class="uni-uploader__input" style="width: 196rpx; height: 196rpx;" @tap="_chooseImg()"></view>
    						</view>
    					</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    export default {
    	name: 'ZwUploadImg',
    	props: {
    		title: {
    			type: String,
    			default: '图片(选填,提供问题图片,总大小10M以下)'
    		},
    		num: {
    			type: Number,
    			default: 9
    		},
    		dataList: {
    			type: Array,
    			default() {
    				return [];
    			}
    		}
    	},
    	data() {
    		return {};
    	},
    	methods: {
    		_previewImage(index) {
    			//预览图片
    			uni.previewImage({
    				urls: this.dataList,
    				current: this.dataList[index]
    			});
    		},
    		_chooseImg() {
    			this.$emit('chooseImg');
    		},
    		_close(index) {
    			this.dataList.splice(index, 1);
    			this.$emit('close', this.dataList);
    		}
    	}
    };
    </script>
    
    <style>
    .close-view {
    	text-align: center;
    	line-height: 24rpx;
    	height: 32rpx;
    	width: 32rpx;
    	border-radius: 50%;
    	background: #ff5053;
    	color: #ffffff;
    	position: absolute;
    	top: -12rpx;
    	right: -8rpx;
    	font-size: 24rpx;
    }
    </style>

插件下载地址：[https://download.csdn.net/download/liujucai/11961003][https_download.csdn.net_download_liujucai_11961003]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191106104313699.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp,size_16,color_FFFFFF,t_70
[20191106104054344.png]: https://img-blog.csdnimg.cn/20191106104054344.png
[https_download.csdn.net_download_liujucai_11961003]: https://download.csdn.net/download/liujucai/11961003