yl-gzh/components/my-file/my-file.vue

<template>
	<view>
		<uni-file-picker :value="zczm" @select="imgSelect" @delete="imgDelete" :limit="limit"></uni-file-picker>
	</view>
</template>

<script>
	import {
		translate,
		base64ToUrl,
		blobToDataURI,
		translateAll
	} from '@/common/image.js'
	export default {
		name: "my-file",
		data() {
			return {
				zczm: [],
			};
		},
		props: {
			zczmList: {
				type: Array,
				default: () => []
			},
			limit: {
				type: Number,
				default: 1
			},
		},
		watch: {
			'zczmList': {
				immediate: true,
				handler(newItems, oldItems) {
					console.log('数组发生变化', newItems, oldItems);
					this.zczm = []
					newItems.forEach(e => {
						this.zczm.push({
							url: e,
							extname: 'png',
							name: 'uniapp-logo.png'
						})
					})
				},
				deep: true // 使用深度监听，以便检测到数组内部的变化
			},
			'zczm': {
				handler(newItems, oldItems) {
					// let zczmList = []
					// newItems.forEach(e => {
					// 	zczmList.push(e.url)
					// })

					// this.$emit("@recordsChange", zczmList)
				},
				deep: true // 使用深度监听，以便检测到数组内部的变化
			},
		},
		methods: {
			imgSelect(e) {
				translateAll(e.tempFilePaths[0], (base64, blobUrl) => {
					this.zczmList.push(base64)
				})
			},
			imgDelete(e) {
				this.zczmList.splice(this.zczmList.indexOf(e.tempFile.path), 1)
			}
		}
	}
</script>

<style>

</style>