【web】 上传修改

ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue

@@ -49,7 +49,19 @@
       </el-col>
       <el-col :span="24">
         <el-form-item label="上传文件" prop="file">
-          <ImageUpload @input="upImage" :value="form.filePath" :fileType="['docx','txt']" listType="txt"/>
+          <el-upload
+            class="upload-demo"
+            ref="upload"
+            :action="upload.url"
+            :data="{ source: form.source }"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :file-list="fileList"
+            :headers="headers"
+            :auto-upload="false">
+            <div slot="tip" class="el-upload__tip">请上传大小不超过5MB格式为docx/txt的文件</div>
+            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+          </el-upload>
         </el-form-item>
       </el-col>
     </el-row>
@@ -57,7 +69,7 @@
   
   </el-form>
    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button type="primary" @click="submitUpload">确定</el-button>
       <el-button @click="cancel">取 消</el-button>
     </span>
   
@@ -131,7 +143,7 @@ export default {
         // 设置上传的请求头部
         headers: { Authorization: "Bearer " + getToken() },
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
+        url: process.env.VUE_APP_BASE_API + "/QandA/knowledge/upload"
       },
       // 查询参数
       queryParams: {
@@ -149,7 +161,11 @@ export default {
         image: [
           { required: true, message: "请上传设备图片", trigger: "blur" },
         ],
-      }
+      },
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: []  
     }
   },
   watch: {
@@ -162,6 +178,24 @@ export default {
     this.getList()
   },
   methods: {
+     submitUpload() {
+        // 添加状态判定
+        if (this.upload.isUploading) {
+          return; // 防止重复上传
+        }
+        this.upload.isUploading = true;
+        this.$refs.upload.submit();
+        this.open = false; // 关闭上传对话框
+        setTimeout(() => {
+          this.getList()
+        }, 1000); // 假设上传需要1秒
+      },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePreview(file) {
+        console.log(file);
+      },
     /** 查询类型列表 */
     getList() {
       this.loading = true
@@ -286,11 +320,17 @@ export default {
     },
     // 文件上传成功处理
     handleFileSuccess(response, file, fileList) {
-      this.upload.open = false
-      this.upload.isUploading = false
-      this.$refs.upload.clearFiles()
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
-      this.getList()
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      
+      // 关闭弹窗
+      this.open = false;
+      
+      // 显示成功消息
+      this.$modal.msgSuccess("上传成功");
+      
+      // 刷新列表
+      this.getList();
     },
     // 提交上传文件
     submitFileForm() {