first

components/my-components/my-up-upload.vue

@@ -0,0 +1,118 @@
+<template>
+	<up-upload :fileList="images" @afterRead="afterRead" @delete="deletePic" :multiple="multiple" :width="width"
+		:height="height" :maxCount="maxCount"></up-upload>
+</template>
+
+<script setup>
+	import {
+		$uploadFile
+	} from '@/http/yskApi/file.js'
+	import {
+		ref,
+		watch
+	} from 'vue';
+
+	const props = defineProps({
+		modelValue: {
+			type: Array,
+			default: () => []
+		},
+		width: {
+			type: [String, Number],
+			default: 60
+		},
+		height: {
+			type: [String, Number],
+			default: 60
+		},
+		maxCount: {
+			type: [Number],
+			default: 10
+		},
+		multiple: {
+			type: Boolean,
+			default: true
+		}
+	})
+
+
+	const emits = defineEmits(['update:modelValue'])
+	const images = ref(props.modelValue)
+	
+	
+	
+	function uploadfile(par){
+		let file=null;
+		// #ifdef H5
+		file= par.file
+		// #endif
+		// #ifndef H5
+		file= par
+		// #endif
+		return $uploadFile(file)
+	}
+	
+	function afterRead(e) {
+		console.log(e);
+		if (Array.isArray(e.file)) {
+			for (let i in e.file) {
+				const file = e.file[i]
+				console.log(file);
+				uploadfile(file).then(res => {
+					console.log(res);
+					images.value.push({
+						url: e.file[i].url,
+						serveUrl: res.data[0]
+					})
+				}).catch(res => {
+					console.log(res);
+					if (res.errMsg) {
+						images.value.splice(i, 1)
+						uni.showToast({
+							title: '图片大小超出限制',
+							icon: 'error'
+						})
+					}
+
+				})
+			}
+		}else{
+			const i=0
+			uploadfile(e.file).then(res => {
+				console.log(res);
+				images.value.push({
+					url: e.file.url,
+					serveUrl: res.data[0]
+				})
+			}).catch(res => {
+				console.log(res);
+				if (res.errMsg) {
+					images.value.splice(i, 1)
+					uni.showToast({
+						title: '图片大小超出限制',
+						icon: 'error'
+					})
+				}
+			
+			})
+		}
+
+	}
+
+	function deletePic(e) {
+		const {
+			index
+		} = e
+		images.value.splice(index, 1)
+	}
+
+	watch(() => images.value, (newval) => {
+		emits('update:modelValue', newval)
+	})
+	watch(() => props.modelValue, (newval) => {
+		images.value = newval
+	})
+</script>
+
+<style>
+</style>