uni-app开发(5)---上传多图组件开发

ゞ浴缸里的玫瑰 2021-08-02 22:19 410阅读 0赞

在开发发表日志、博客之类的功能时，往往用到上传组件上传一张或者多张图片，功能需求及效果图如下：

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

**需求：**

在点击上传标志时，可以选择拍照或者手机相册上传，点击右上角的删除按钮，可以删除当前上传的图片。

--------------------

**代码分析 **

**HTML**

<view class="uni-list list-pd">
    			<view class="uni-list-cell cell-pd">
    				<view class="uni-uploader">
    					<view class="uni-uploader-head">
    						<view class="uni-uploader-title">点击可预览选好的图片</view>
    						<view class="uni-uploader-info">{
       {imageList.length}}/9</view>
    					</view>
    					<view class="uni-uploader-body">
    						<view class="uni-uploader__files">
    							<block v-for="(image,index) in imageList" :key="index">
    								<view class="uni-uploader__file">
    									<view class="icon iconfont icon-shanchu" @tap="delect(index)"></view>
    									<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
    								</view>
    							</block>
    							<view class="uni-uploader__input-box">
    								<view class="uni-uploader__input" @tap="chooseImage"></view>
    							</view>
    						</view>
    					</view>
    				</view>
    			</view>
    		</view>

--------------------

JS

<script>
    	var sourceType = [
    		['camera'],
    		['album'],
    		['camera', 'album']
    	]
    	var sizeType = [
    		['compressed'],
    		['original'],
    		['compressed', 'original']
    	]
    	let changelook = ['所有人可见', '仅自己可见'];
    	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
    	export default {
    		components: {
    			uniNavBar,
    		},
    		data() {
    			return {
    				text:'66666',
    				yinsi: '所有人可见',
    				imageList: [],
    				sourceTypeIndex: 2,
    				sourceType: ['拍照', '相册', '拍照或相册'],
    				sizeTypeIndex: 2,
    				sizeType: ['压缩', '原图', '压缩或原图'],
    				countIndex: 8,
    				count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    			}
    		},
    		methods: {
    			back() {
    				uni.navigateBack({
    					delta: 1
    				});
    			},
    			submit() {
    				console.log('发布');
    			},
    			changeLook() {
    				uni.showActionSheet({
    					itemList: changelook,
    					success: (res) => {
    						console.log(res);
    						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
    						this.yinsi = changelook[res.tapIndex];
    					},
    					fail: (res) => {
    						console.log(res.errMsg);
    					}
    				});
    			},
    			
    			// 选择图片
    			chooseImage: async function() {
    			    if (this.imageList.length === 9) {
    					return;
    			    }
    			    uni.chooseImage({
    			        sourceType: sourceType[this.sourceTypeIndex],
    			        sizeType: sizeType[this.sizeTypeIndex],
    			        count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length :
    			            this.count[this.countIndex],
    			        success: (res) => {
    			            this.imageList = this.imageList.concat(res.tempFilePaths);
    						console.log(this.imageList.length,'照片数量')
    			        }
    			    })
    			},
    			
    			
    			previewImage: function(e) {
    			    var current = e.target.dataset.src
    			    uni.previewImage({
    			        current: current,
    			        urls: this.imageList
    			    })
    			},
    			delect(index){
    				uni.showModal({
    				    title: '提示',
    				    content: '是否删除该图片？',
    				    success: (res) =>{
    				        if (res.confirm) {
    				            this.imageList.splice(index, 1)
    				        } 
    				    }
    				});
    			}
    		}
    	}
    </script>

代码分析：

1、变量sourceType、sizeType分别表示照片来源（拍照或者相册）与照片大小处理方式（原始或者压缩）。

2、chooseImage表示选择照片，previewImage表示预览图片。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/782cb64d24f342b68549f855b475b174.png

发表评论取消回复

表情：

评论列表（有 0 条评论，410人围观）

还没有评论，来说两句吧...

相关阅读

相关 40.封装上传多图组件 uni-app

1.封装时注意：选择成功及删除成功都需要添加传递给父组件的监听事件 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

淩亂°似流年/ 2022年12月11日 15:01/ 0 赞/ 248 阅读

相关 39.上传多图功能开发 uni-app

模仿官方例子： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

不念不忘少年蓝@/ 2022年12月11日 13:59/ 0 赞/ 170 阅读

相关 html无组件上传,无组件上传文件，一个函数搞定-ASP教程,组件开发

本函数是用“化境asp无组件上传程序2.0”上传文件。核心函数： ============================== 函数名：upfile 作用: 使用“化

淡淡的烟草味﹌/ 2022年10月06日 10:50/ 0 赞/ 388 阅读

相关 tp5多图上传

![70][] [70]: /images/20220505/08cb418d77fc4ec389b9af510a7dd4a2.png

小鱼儿/ 2022年05月11日 16:44/ 0 赞/ 311 阅读

相关 thinkphp5,单图,多图,上传

/ 上传单图 / function upload($path, $filename) { $file =

偏执的太偏执、/ 2022年03月30日 08:40/ 0 赞/ 327 阅读

相关 uniapp 上传图片文件组件

<template> <view> <view @click="uploadClick" class="picBox">

迈不过友情╰/ 2021年09月19日 04:08/ 0 赞/ 763 阅读

相关上传多图

<?php require_once 'base.php';?> <!DOCTYPE html> <html> <head> <meta

我就是我/ 2021年09月18日 15:34/ 0 赞/ 420 阅读

相关 uni-app开发(5)---上传多图组件开发

在开发发表日志、博客之类的功能时，往往用到上传组件上传一张或者多张图片，功能需求及效果图如下：效果图： ![watermark_type_ZmFuZ3poZW5n

ゞ浴缸里的玫瑰/ 2021年08月02日 22:19/ 0 赞/ 411 阅读

相关 uniapp 开发规范、引入组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

你的名字/ 2021年07月24日 18:24/ 0 赞/ 788 阅读

相关小程序开发图片上传，多文件上传。

小程序开发图片上传，多文件上传。参考http://www.wxapp-union.com/portal.php?mod=view&aid=1213 实际使用

系统管理员/ 2021年07月16日 14:36/ 0 赞/ 639 阅读