ldb-safe-hh/components/h-upload/h-upload.vue

<template>
	<view :style="wrapClass">
		<u-upload
			:accept="accept"
			:fileList="child"
			:maxCount="maxCount"
			:width="size"
			:height="size"
			:uploadIcon="uploadIcon"
			:uploadText="uploadText"
			@afterRead="afterRead"
			@delete="deleteClick"/>
	</view>
</template>

<script>
	import { uploadFile } from '@/network/module/common.api.js'
	
	export default {
		name:"h-upload",
		props: {
			value: {
				type: Array,
				default: () => []
			},
			accept: {
				type: String,
				default: 'image'
			},
			maxCount: {
				type: Number,
				default: 1
			},
			size: {
				type: String,
				default: '160rpx'
			},
			uploadIcon: {
				type: String,
				default: 'photo'
			},
			uploadText: {
				type: String,
				default: '上传照片'
			},
			validateField: {
				type: String,
				require: true,
				default: 'photoList'
			},
			display: {
				type: String,
				default: 'inline'
			}
		},
		model: {
		  prop: 'value',
		  event: 'change'
		},
		data() {
			return {
				child: this.formatFile(this.value)
			}
		},
		computed: {
			wrapClass(){
				if(this.display === 'block') {
					return {
						width: '100%',
						marginTop: '20rpx'
					}
				} else {
					return {
						width: 'auto',
						marginTop: '0rpx'
					}
				}
			}
		},
		watch: {
			value(newValue) {
				this.child = this.formatFile(newValue)
			}
		},
		methods: {
			formatFile(inputFile) {
				if(!inputFile || inputFile.length <= 0) {
					return []
				}
				return inputFile.map((item, index) => {
					const suffix = item.substr(item.lastIndexOf("."))
					return {
						message: '',
						name: `${index}${suffix}`,
						status: 'success',
						thumb: item,
						type: this.accept,
						url: item
					}
				})
			},
			// 删除
			deleteClick(event) {
				this.child.splice(event.index, 1)
				this.$emit('change', this.getChangeFormatChild(this.child) )
				if(this.validateField) {
					uni.$u.$parent.call(this).$refs.uForm.validateField(this.validateField)
				}
			},
			getChangeFormatChild(child) {
				if(!child || child.length <= 0) {
					return []
				}
				return child.map(item => {
					return item.url
				})
			},
			// 新增
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.child.length
				lists.map((item) => {
					this.child.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile(lists[i].url)
					let item = this.child[fileListLen]
					this.child.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data
					}))
					fileListLen++
				}
				this.$emit('change', this.getChangeFormatChild(this.child))
				if(this.validateField) {
					const parent = uni.$u.$parent.call(this)
					parent.$refs.uForm.validateField(this.validateField)
				}
			}
		}
	}
</script>

<style>

</style>