fe-student/src/components/img/UploadImg.vue

<template>
	<el-upload :file-list="files" :action="FILE_UPLOAD_ANNEX" method="POST" :show-file-list="false" :on-change="handleChange"
		:limit="max" ref="imageRef" :on-exceed="exceed">
		<template #trigger>
			<div>
				<slot></slot>
			</div>
		</template>
	</el-upload>
</template>
<script setup>
import { FILE_UPLOAD_ANNEX } from "@/api/api";
import { defineProps, ref, watch } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
	value: [],
	max: {
		type: Number,
		default: 1
	}
})

const emit = defineEmits()

const files = ref([])
const imageRef = ref()

watch(props.value, () => {
	props.value.length || (files.value = props.value)
})

function exceed() {
	ElMessage.error(`只能上传${props.max}个附件`);
}

function handleChange(e) {
	if (e.response && e.response.code === 200) {
		e.url = e.response.data
	}

	const index = files.value.findIndex(f => f.uid === e.uid)
	if (index === -1) {
		files.value.unshift(e)
	} else {
		files.value[index] = e
	}
	emit('update:value', files.value)
}

function remove(i) {
	files.value.splice(i, 1)
	console.log(imageRef)
}

function clearFiles() {
	imageRef.value.clearFiles();
}

function reUpload(i) {
	if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
		imageRef.value.abort(files.value[i].raw)
		files.value[i].status = 'abort';
	} else if (files.value[i].status === 'fail' || files.value[i].status === 'abort') {
		imageRef.value.handleStart(files.value[i].raw)
		imageRef.value.submit()
	}
}

function abort(i) {
	imageRef.value.abort(files.value[i].raw)
}


defineExpose({ reUpload, remove, clearFiles })

</script>