feat:修改作业上传及显示

src/components/img/UploadImg.vue

@@ -2,20 +2,19 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-18 14:40:26
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-01-20 11:31:34
+ * @LastEditTime: 2023-02-19 16:37:15
  * @FilePath: /stu_h5/src/components/img/UploadImg.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <el-upload
     :file-list="files"
-    :action="FILE_UPLOAD_ANNEX"
+    :action="FILE_UPLOAD"
     method="POST"
     :show-file-list="false"
     :on-change="handleChange"
-    :limit="max"
+    :limit="1"
     ref="imageRef"
-    :on-exceed="exceed"
   >
     <template #trigger>
       <div>
@@ -25,18 +24,18 @@
   </el-upload>
 </template>
 <script setup>
-import { FILE_UPLOAD_ANNEX } from "@/api/api";
+import { FILE_UPLOAD } from "@/api/api";
 import { defineProps, ref, watch } from "vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElLoading } from "element-plus";
 
 const props = defineProps({
-  value: [],
+  fileList: [],
   max: {
     type: Number,
     default: 1,
   },
 });
-
+console.log("fileListfileList", props.fileList, props);
 const emit = defineEmits();
 
 const files = ref([]);
@@ -49,8 +48,21 @@ watch(props.value, () => {
 function exceed() {
   ElMessage.error(`只能上传${props.max}个附件`);
 }
-
+// 使用
+const loading = ref(false); // loading
+const openLoading = () => {
+  loading.value = ElLoading.service({
+    lock: true,
+    text: "Loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+};
+const closeLoading = () => {
+  loading.value.close();
+};
 function handleChange(e) {
+  openLoading();
+  console.log("上传", e);
   if (e.response && e.response.code === 200) {
     e.url = e.response.data;
   }
@@ -61,7 +73,9 @@ function handleChange(e) {
   } else {
     files.value[index] = e;
   }
-  emit("update:value", files.value);
+  emit("update:fileList", files.value);
+  files.value = [];
+  closeLoading();
 }
 
 function remove(i) {