init

src/components/img/UploadImg.vue

@@ -5,7 +5,9 @@
       method="POST"
       :show-file-list="false"
       :on-change="handleChange"
+      :limit="max"
       ref="imageRef"
+      :on-exceed="exceed"
   >
     <template #trigger>
       <div>
@@ -16,19 +18,31 @@
 </template>
 <script setup>
 import {FILE_UPLOAD} from "@/api/api";
-import {defineProps, ref} from "vue";
+import {defineProps, ref, watch} from "vue";
+import {ElMessage} from "element-plus";
 
-const {modelValue = []} = defineProps({
-  modelValue: []
+const props = defineProps({
+  value: [],
+  max: {
+    type: Number,
+    default: 1
+  }
 })
 
 const emit = defineEmits()
 
-const files = ref(modelValue)
+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) {
-  console.log(e)
   if (e.response && e.response.code === 200) {
     e.url = e.response.data
   }
@@ -39,7 +53,7 @@ function handleChange(e) {
   } else {
     files.value[index] = e
   }
-  emit('update:modelValue', files)
+  emit('update:value', files.value)
 }
 
 function remove(i) {
@@ -50,7 +64,7 @@ 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') {
+  } else if (files.value[i].status === 'fail' || files.value[i].status === 'abort') {
     imageRef.value.handleStart(files.value[i].raw)
     imageRef.value.submit()
   }