From 0935ca141ea1851ca0656517911305a5813cc4fb Mon Sep 17 00:00:00 2001
From: lixg <lixg@dongwu-inc.com>
Date: Wed, 18 Jan 2023 19:47:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                  |   2 +-
 src/api/api.js                        |   6 +-
 src/assets/image/download.png         | Bin 0 -> 457 bytes
 src/components/img/UploadImg.vue      |  97 ++++++++++++++++++++++++++
 src/views/homeworkpage/UploadWork.vue |  26 ++++---
 5 files changed, 116 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/image/download.png
 create mode 100644 src/components/img/UploadImg.vue

diff --git a/.env b/.env
index 51fb97d..2b89436 100644
--- a/.env
+++ b/.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
diff --git a/src/api/api.js b/src/api/api.js
index 0773371..ed18516 100644
--- a/src/api/api.js
+++ b/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'
diff --git a/src/assets/image/download.png b/src/assets/image/download.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b67a8134458c49a170d2022b335054dc3bd5f5c
GIT binary patch
literal 457
zcmV;)0XF`LP)<h;3K|Lk000e1NJLTq000mG000jN1^@s6?Q>5r00001b5ch_0Itp)
z=>Px$gGod|R5(wSk}*hIQ51&1KeoluDO)M!JrUi+F741jhfZSS>S%Eh-Nd{kbL@T1
zSi6-9Lg(sU3T77zb*Sb&OA*A~P0c&yJrar0N7}R9d;b5s|GD>yobm(P16~5H$f=a4
zQ!b!lUlC=Doha1&P=Hsr$GYTE)Kr{`{lIpBH^6S>R8IFM)@=efJ9@8+9xzMb1vVo{
zBR@2F5j*Ys0}1@9l`y^or-D~)r<2s10mdt~VB$-cdR`deS<;~fEF(U43N%Nq`GFYA
zOh&04s&xa%B3G=2XmlZmz!fkJ8~~%hWViP=a{7F0gx+ERa^JlzMNXgk8+Ts853CAo
z+~dAu&PMR6R!#~W{BGz^UJ{AL_B(C$`cLcjq>wNzIF=un0h^K2YX7Ne62W|8Y{sFs
z2YMfX72szEFlfe3>v^ALaNny~D3R)K0N-NA>+FGsl(%L@Js|yL&w<0<2&wHCa6SwG
zOaaBNuGJ6t2k&i(j9Gbs)g|Ws+nul*h1&QF(7TUdNV9b<00000NkvXXu0mjfBG}F)

literal 0
HcmV?d00001

diff --git a/src/components/img/UploadImg.vue b/src/components/img/UploadImg.vue
new file mode 100644
index 0000000..53eef83
--- /dev/null
+++ b/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>
diff --git a/src/views/homeworkpage/UploadWork.vue b/src/views/homeworkpage/UploadWork.vue
index f6ccf85..c7e18f2 100644
--- a/src/views/homeworkpage/UploadWork.vue
+++ b/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("点击");