feat:增加下载图片

.env

@@ -1,5 +1,5 @@
 VITE_BASE=/fe-student-h5
-VITE_BASE_API=/
+VITE_BASE_API=
 VITE_OUTPUT_DIR=./dist
 VITE_BASE_LOGIN_URL=https://u-pre.boe.com/web?returnUrl=
 VITE_PROXY_URL=http://111.231.196.214/manageApi

src/api/api.js

@@ -2,13 +2,13 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-13 11:42:48
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-01-17 17:06:24
+ * @LastEditTime: 2023-01-18 14:57:44
  * @FilePath: /stu_h5/src/api/api.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 export const BASE = 'http://localhost:3000'
 export const LOGIN = '/admin/CheckUser/userLogin post'
-export const FILE_UPLOAD = '/file/upload'
+export const FILE_UPLOAD = import.meta.env.VITE_BASE_API + '/file/upload'
 export const ROUTER_CHAPTER_LIST = '/stu/router/chapterList'
 export const ROUTER_LIST = '/stu/router/list post'
 export const ROUTER_PROCESS = '/stu/router/process'
@@ -37,4 +37,4 @@ export const TASK_WORK_SUBMIT_LIST = '/workSubmit/queryWorkSubmitDetailById'
 export const WORK_HISTROY = '/workSubmit/queryWorkDetailListByStuId'
 export const ASSESSMENT_QUERY = assessmentId => `/stu/task/queryAssessmentDetailById`
 export const ASSESSMENT_SUBMIT = '/stu/task/evaluate/commit post'
-
+export const FILE_UPLOAD_ANNEX = import.meta.env.VITE_BASE_API + '/file/stuUploadAnnex'

src/components/img/UploadImg.vue

@@ -0,0 +1,97 @@
+<!--
+ * @Author: lixg lixg@dongwu-inc.com
+ * @Date: 2023-01-18 14:40:26
+ * @LastEditors: lixg lixg@dongwu-inc.com
+ * @LastEditTime: 2023-01-18 14:58:06
+ * @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"
+    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 } 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>

src/views/homeworkpage/UploadWork.vue

@@ -25,7 +25,9 @@
           <div class="line"></div>
         </div>
         <div class="allimg">
-          <img src="../../assets/image/homeworkpage/link.png" />
+          <UploadImg v-model:value="fileList" ref="uploadRef">
+            <img src="../../assets/image/homeworkpage/link.png" />
+          </UploadImg>
           <!-- <img src="../../assets/image/homeworkpage/pre.png" />
           <img src="../../assets/image/homeworkpage/next.png" /> -->
           <img
@@ -45,10 +47,12 @@ import { request, useRequest } from "@/api/request";
 import { TASK_WORK_COMMIT } from "@/api/api";
 import { useRoute } from "vue-router/dist/vue-router";
 import { ElMessage } from "element-plus";
+import UploadImg from "@/components/img/UploadImg.vue";
 export default {
   name: "UploadWork",
   components: {
     ReturnHead,
+    UploadImg,
   },
   setup() {
     const state = reactive({
@@ -76,16 +80,16 @@ export default {
         type,
         taskId: taskId || infoId,
       };
-      console.log("obj", obj);
-      request(TASK_WORK_COMMIT, obj).then((res) => {
-        console.log("上传作业", res);
-        // submitList.value.unshift(res.data);
-        // open();
-        textarea.value = "";
-        fileList.value = [];
-        // remove(0);
-        // clearFiles();
-      });
+      console.log("obj", obj, fileList.value);
+      // request(TASK_WORK_COMMIT, obj).then((res) => {
+      //   console.log("上传作业", res);
+      //   // submitList.value.unshift(res.data);
+      //   // open();
+      //   textarea.value = "";
+      //   fileList.value = [];
+      //   // remove(0);
+      //   // clearFiles();
+      // });
     };
     const deleteAll = () => {
       console.log("点击");