拖拽上传

src/views/exercise_questions/create/components/common/UploadDrag.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="upload-wrapper">
+    <el-upload
+      ref="upload"
+      action="no"
+      accept=".jpg,.png,.gif"
+      drag
+      :show-file-list="false"
+      :before-upload="beforeUpload"
+      :http-request="upload"
+      :on-exceed="handleExceed"
+      :limit="limit"
+    >
+      <div>点击或拖拽图片到此上传</div>
+      <div>只有 jpg, png, gif 等格式文件可以上传，文件大小不得超过 5MB</div>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { fileUpload } from '@/api/app';
+
+export default {
+  name: 'UploadAudio',
+  props: {
+    limit: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {};
+  },
+  watch: {},
+  methods: {
+    beforeUpload(file) {
+      // 可以用来限制文件大小
+      if (file.size > 5 * 1024 * 1024) {
+        this.$message.warning('上传图片大小不能超过5M');
+        return false; // 必须返回false
+      }
+    },
+    upload(file) {
+      fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
+        if (file_info_list.length > 0) {
+          const { file_id, file_url } = file_info_list[0];
+          this.$emit('fileUploadSuccess', file_id, file_url);
+        }
+      });
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 ${this.limit ? this.limit : 1} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`,
+      );
+    },
+  },
+};
+</script>

src/views/exercise_questions/create/components/exercises/TalkPictureQuestion.vue

@@ -53,19 +53,7 @@
             </div>
           </template>
         </div>
-        <el-upload
-          ref="upload"
-          action="no"
-          accept=".jpg,.png,.gif"
-          drag
-          :show-file-list="false"
-          :before-upload="beforeUpload"
-          :http-request="upload"
-          :on-exceed="handleExceed"
-        >
-          <div>点击或拖拽图片到此上传</div>
-          <div>只有 jpg, png, gif 等格式文件可以上传，文件大小不得超过 5MB</div>
-        </el-upload>
+        <UploadDrag @fileUploadSuccess="fileUploadSuccess" :limit="999" ref="uploadDrag"></UploadDrag>
       </div>
     </template>
 
@@ -150,11 +138,13 @@
 import QuestionMixin from '../common/QuestionMixin.js';
 
 import { talkPictrueData, getOption } from '@/views/exercise_questions/data/talkPicture';
-import { fileUpload, GetFileStoreInfo } from '@/api/app';
+import { GetFileStoreInfo } from '@/api/app';
+import UploadDrag from '../common/UploadDrag.vue';
 
 export default {
   name: 'TalkPicture',
   mixins: [QuestionMixin],
+  components: { UploadDrag },
   data() {
     return {
       data: JSON.parse(JSON.stringify(talkPictrueData)),
@@ -195,33 +185,15 @@ export default {
           delete this.pic_list[id];
           this.data.file_id_list.splice(this.data.file_id_list.indexOf(id), 1);
           this.data.option_list.splice(i, 1);
+          this.$refs.uploadDrag.clearFiles();
         })
         .catch(() => {});
     },
-    beforeUpload(file) {
-      // 可以用来限制文件大小
-      if (file.size > 5 * 1024 * 1024) {
-        this.$message.warning('上传图片大小不能超过5M');
-        return false; // 必须返回false
-      }
-    },
-    upload(file) {
-      fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
-        if (file_info_list.length > 0) {
-          const { file_id, file_url } = file_info_list[0];
-          this.data.file_id_list.push(file_id);
-          this.data.option_list.push(getOption());
-          this.data.option_list[this.data.option_list.length - 1].picture_file_id = file_id;
-          this.$set(this.pic_list, file_id, file_url);
-        }
-      });
-    },
-    handleExceed(files, fileList) {
-      this.$message.warning(
-        `当前限制选择 ${this.filleNumber ? this.filleNumber : 1} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-          files.length + fileList.length
-        } 个文件`,
-      );
+    fileUploadSuccess(file_id, file_url) {
+      this.data.file_id_list.push(file_id);
+      this.data.option_list.push(getOption());
+      this.data.option_list[this.data.option_list.length - 1].picture_file_id = file_id;
+      this.$set(this.pic_list, file_id, file_url);
     },
   },
 };

src/views/exercise_questions/data/chinese.js

@@ -39,7 +39,7 @@ export const chineseData = {
   type: 'chinese', // 题型
   stem: '', // 题干
   description: '', // 描述
-  option_number_show_mode: optionTypeList[0].value, // 选项类型
+  option_number_show_mode: optionTypeList[1].value, // 选项类型
   answer: { score: 0, score_type: scoreTypeList[0].value }, // 答案
   option_list: [getOption(), getOption(), getOption()], // 选项
   file_id_list: [],

src/views/exercise_questions/data/common.js

@@ -34,6 +34,14 @@ export const questionTypeOption = [
     ],
   },
   {
+    value: 'character',
+    label: '汉字题',
+    children: [
+      { label: '汉字练习', value: 'chinese' },
+      { label: '字词卡片', value: 'word_card' },
+    ],
+  },
+  {
     value: 'read',
     label: '阅读题',
   },
@@ -41,10 +49,6 @@ export const questionTypeOption = [
     value: 'write',
     label: '写作题',
   },
-  {
-    value: 'chinese',
-    label: '汉字题',
-  },
 ];
 
 // 练习名称