update

src/components/img/UploadImg2HomeWork.vue

@@ -0,0 +1,123 @@
+<template>
+  <el-upload :file-list="files" :show-file-list="false" :limit="max" ref="imageRef" :before-upload="beforeUpload">
+    <template #trigger>
+      <div>
+        <slot></slot>
+      </div>
+    </template>
+  </el-upload>
+</template>
+<script setup>
+import { defineProps, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { computed } from "vue";
+import { useStore } from "vuex";
+import { request,fileUp } from "@/api/request";
+
+const store = useStore();
+const userInfo = computed(() => store.state.userInfo);
+
+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 beforeUpload(file) {
+  //2023-02-26增加文件名格式：文件名称_学生名_时间戳+资源地址
+  let dt = new Date();
+  let nowtime = dt.getFullYear() + (dt.getMonth() + 1).toString().padStart(2, '0')
+    + dt.getDate().toString().padStart(2, '0') + dt.getHours().toString().padStart(2, '0')
+    + dt.getMinutes().toString().padStart(2, '0') + dt.getSeconds().toString().padStart(2, '0');
+  console.log("用户姓名：" + userInfo.value.realName);
+  console.log("源文件名称：" + file.name);
+  let fileNewName = file.name.split(".")[0] + "_" + userInfo.value.realName + "_" + nowtime + "." + file.name.split(".")[1];
+  console.log("新文件名称：" + fileNewName);
+  const copyFile = new File([file], fileNewName);
+  console.log("新拷贝的文件名称：" + JSON.stringify(copyFile));
+  uploadFile(copyFile);
+  return false;
+}
+
+function uploadFile(file) {
+  const formdata = new FormData();
+  formdata.append('file', file)
+  console.log("formdata:" + JSON.stringify(formdata));
+  postForm(formdata)
+}
+
+function postForm(formdata) {
+  console.log("postForm:" + JSON.stringify(formdata));
+  fileUp(formdata).then((e) => {
+    console.log(JSON.stringify(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)
+  }).catch((err) => {
+    ElMessage.error(`文件上传失败` + err);
+  })
+}
+
+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>

src/views/homework/HomeworkPage.vue

@@ -450,7 +450,8 @@ import {
 } from "@/api/api";
 import dayjs from "dayjs";
 import { useRouter } from "vue-router";
-import UploadImg from "@/components/img/UploadImg.vue";
+// import store from "@/store";
+import UploadImg from "@/components/img/UploadImg2HomeWork.vue";
 import FileTypeImg from "@/components/FileTypeImg.vue";
 import { useRoute } from "vue-router/dist/vue-router";
 import { ElMessage } from "element-plus";
@@ -482,7 +483,6 @@ const {
     infoId,
   },
 } = useRoute();
-
 const { data } =
   taskId && taskId !== "undefined"
     ? useRequest(TASK_WORK_DETAIL, { workId, taskId })