emis-sapp/components/tpx-upload/tpx-upload.vue

<template>
	<view>
		<view v-if="!isSlot"  @click="handleChooseFile" class="cam" style="">
			<view class="">
				<u-icon name="camera" size="50"></u-icon>
			</view>
			<view class="font-22">
				<text>上传</text>
				<text v-if="fileType==fileTypeEnum.image">照片</text>
				<text v-if="fileType==fileTypeEnum.video">视频</text>
			</view>
		</view>
		<view v-if="isSlot" @click="handleChooseFile">
			<slot></slot>
		</view>
		<view v-for="(item) in list" style="margin-top: 10rpx;">
			<view class="cdimg" @click="handleItem" data-index="{{index}}">
				<tpx-image v-if="fileType==fileTypeEnum.image" :src="item" :mode="mode" :scale="scale"></tpx-image>
				<video v-if="fileType==fileTypeEnum.video" :src="item"></video>
			</view>
		</view>

	</view>
</template>

<script>
	import { coreMultiUploadFile } from "@/common/upload"
	import { showToast } from "@/common/untool"
	
	const fileTypeEnum = {
		// all: "all",
		image: "image",
		video: "video",
	}

	export default {
		computed: {
			
			list() {
				let val = this.value
				let res = []
				if (typeof val == "object") {
					res = val
				}
				if (typeof val == 'string' && val !== '') {
					res = val.split(",")
				}
				return res
			},
		},
		props: {
			value: {
				default () {
					return ''
				}
			},
			fileType: {
				default () {
					return fileTypeEnum.image
				}
			},
			pickMaxLen: { // 一次最多选择个数
			    default () {
					return 5
			    }
			},
			maxLen: { // 最大个数
			    default () {
					return 1
			    }
			},
			minLen: { // 最小个数
			    default () {
					return 1
				}
			},
			scale: {
				default () {
					return [1, 1] // 宽高比
				}
			},
			isSlot: {
				default () {
					return false
				}
			}
		},
		data() {
			return {
				fileTypeEnum: Object.assign({}, fileTypeEnum),
			}
		},
		created() {

		},
		onHide() {

		},
		destroyed() {},

		methods: {
			doChooseFile(opt = {}) {
				const that = this
				const actMap = {
					image: "chooseImage",
					video: "chooseVideo",
				}
				return coreMultiUploadFile(actMap[this.fileType], opt)
			},
			handlePreview() {
				uni.previewImage({
					urls: [
						...this.list
					]
				})
			},
			handleItem(e) {
				const that = this
				const index = e.currentTarget.dataset.index
				let { list, fileType } = this
				let itemList = ['更换', '删除', '预览']
				if (fileType == fileTypeEnum.video) {
					itemList.length--
				}
				uni.showActionSheet({
					itemList,
					success: (res) => {
						const {
							tapIndex
						} = res
						if (tapIndex == 0) {
							// 更换, 只能选择一个文件
							that.doChooseFile({
								count: 1
							}).then((res) => {
								list[index] = res[0]
								that.triggerChanged(list)
							})
						}
						if (tapIndex == 1) {
							list.splice(index, 1)
							that.triggerChanged(list)
						}
						if (tapIndex == 2) {
							this.handlePreview()
						}
					},
					fail: (res) => {
						console.log(res.errMsg)
					}
				})
			},
			handleChooseFile: function() {
				let that = this
				let { maxLen, pickMaxLen, list } = this
				let count = pickMaxLen
				if (list.length + pickMaxLen > maxLen) {
					count = maxLen - list.length
				}
				if (count <= 0) {
					return showToast(`最多上传${maxLen}个`)
				}
				this.doChooseFile({
					count
				}).then((res) => {
					list = list.concat(res)
					that.triggerChanged(list)
				})
			},
			triggerChanged(list) {
				let val = list
				if(this.maxLen == 1) {
					val = list[0] || ''
				}
				this.$emit('change', val)
				this.$emit('update:value', val)
			}
		}
	}
</script>

<style scoped lang="scss">
	.cam {
		height: 168rpx;
		width: 168rpx;
		border: 2rpx solid #EFEFEF;
		border-radius: 6rpx;
		background: #F8F8F8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>