uniapp+uview upload实现上传，action为#时，自己处理

不念不忘少年蓝@ 2022-09-10 15:09 269阅读 0赞

upload文件

<template>
    	<view>
    		<view class="multiImgContainer">
    			<view v-for="(item, index) in lists" :key="index">
    				<view class="showImageContainer" v-if="item.filePath || item.url">
    					<u-image width="85px" height="85px" class="showImageBox" :src="item.filePath || item.url">
    					</u-image>
    					<u-icon name="close-circle-fill" class="deleteIconBox" @click="deleteImg(index)">
    					</u-icon>
    				</view>
    			</view>
    		</view>
    		<u-upload :before-remove="beforeRemove" ref="uUpload" :show-upload-list="false" action="#" :auto-upload="false"
    			max-count="100" @on-list-change="onListChange">
    		</u-upload>
    	</view>
    </template>
    <script>
    	export default {
    		props: {
    			lists: {
    				type: Array,
    				default: () => []
    			},
    		},
    		methods: {
    			deleteImg(index) {
    				this.$emit("delete",index)
    			},
    			onListChange(list) {
    				let filterHasPath = this.lists.filter(item=>item.filePath)
    				let filterListHasPath = list.filter(item=>item.filePath)
    				if(filterListHasPath.length===0&&filterHasPath.length>0){
    					this.$emit("change", [...list,...filterHasPath])
    				}else{
    					this.$emit("change", list)
    				}
    			},
    			beforeRemove(index, lists) {
    				return true;
    			}
    		}
    	}
    </script>
    
    <style>
    	.showImageContainer {
    		position: relative;
    		width: 85px;
    		height: 85px;
    		border: 1px solid #ebecee;
    		overflow: hidden;
    		margin: 10rpx;
    		background: #f4f5f6;
    		position: relative;
    		border-radius: 10rpx;
    		display: flex;
    		-webkit-box-align: center;
    		align-items: center;
    		-webkit-box-pack: center;
    		justify-content: center;
    	}
    
    	.swiper {
    		height: 90px;
    	}
    
    	.deleteIconBox {
    		color: #fa3534;
    		font-size: 18px;
    		position: absolute;
    		top: 10rpx;
    		right: 10rpx;
    		z-index: 10;
    		border-radius: 100rpx;
    		width: 44rpx;
    		height: 44rpx;
    	}
    
    	.multiImgContainer {
    		display: flex;
    		flex-direction: row;
    		flex-wrap: wrap;
    	}
    </style>

edit页面引入上面的upload

<template>
    	<view style="height: 100%;display: flex;flex-direction: column;">
    		<upload-multi @change="onListChangeSC" @delete="deleteImgSC" :lists="listsSC" :fileList="fileListSC" />
    	</view>
    </template>
    
    <script>
    	import uploadMulti from '../../components/upload-multi/upload-multi.vue';
    	const db = uniCloud.database();
    	const dbCollectionName = 'purchase';
    
    
    	export default {
    		components: {
    			uploadMulti
    		},
    		data() {
    			let formData = {
    				"PRODUCTION_CERTUFUCATE": [],
    			}
    			return {
    				fileListSC: [],
    				listsSC: [] // 组件内部的文件列表
    			}
    		},
    		onLoad(e) {
    			if (e.id) {
    				const id = e.id
    				this.formDataId = id
    				this.getDetail(id)
    			}
    		},
    		methods: {
    			deleteImgSC(index) {
    				this.listsSC.splice(index, 1);
    				if (this.listsSC.length > 0) {
    					let allList = [];
    					for (let i = 0; i < this.listsSC.length; i++) {
    						allList.push({
    							filePath: this.listsSC[i].url || this.listsSC[i].filePath,
    							uploadTime: new Date().getTime()
    						})
    					}
    					this.formData.PRODUCTION_CERTUFUCATE = allList;
    				} else {
    					this.formData.PRODUCTION_CERTUFUCATE = []
    					this.fileListSC = []
    					this.listsSC = []
    				}
    			},
    			onListChangeSC(lists) {
    				console.log('onListChange', lists);
    				this.listsSC = lists;
    				this.fileListSC = lists;
    				console.log('this.listsSC', this.listsSC);
    				console.log('this.formData', this.formData);
    				let allList = [];
    				for (let i = 0; i < lists.length; i++) {
    					allList.push({
    						filePath: lists[i].url || lists[i].filePath,
    						uploadTime: new Date().getTime()
    					})
    				}
    				this.formData.PRODUCTION_CERTUFUCATE = allList;
    			},
    			/**
    			 * 触发表单提交
    			 */
    			submit(formData) {
    				uni.showLoading({
    					mask: true
    				})
    				this.$refs.form.validate().then((res) => {
    					res.PRODUCTION_CERTUFUCATE = formData.PRODUCTION_CERTUFUCATE
    					this.submitForm(res)
    				}).catch(() => {
    					uni.hideLoading()
    				})
    			},
    			/**
    			 * 获取表单数据
    			 * @param {Object} id
    			 */
    			getDetail(id) {
    				uni.showLoading({
    					mask: true
    				})
    				db.collection(dbCollectionName).doc(id).field(
    					"PRODUCTION_CERTUFUCATE"
    				).get().then((res) => {
    					const data = res.result.data[0]
    					if (data) {
    						this.formData = data
    						this.listsSC = data.PRODUCTION_CERTUFUCATE
    						this.fileListSC = data.PRODUCTION_CERTUFUCATE
    					}
    				}).catch((err) => {
    					uni.showModal({
    						content: err.message || '请求服务失败',
    						showCancel: false
    					})
    				}).finally(() => {
    					uni.hideLoading()
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>