优化上传文件组件

src/views/modules/common/upload-component.vue

@@ -1,151 +1,208 @@
 <template>
-    <section>
-      <el-col :span="24">
-        <div v-show="displayTitle" class="title"><span v-show="displayStar" style="color: red">*</span> {{title}}</div>
-        <el-upload
-          :disabled="display"
-          class="upload-demo"
-          ref="upload"
-          :multiple="multiple"
-          action="#"
-          :accept="accept"
-          :on-preview="handlePreview"
-          :on-remove="handleRemove"
-          :on-change="handleChange"
-          :file-list="fileList"
-          :limit="limit"
-          :on-exceed="handleExceed"
-          :auto-upload="false"
-          style="margin-top: 10px; margin-left: 10px">
-          <el-button v-show="!display" slot="trigger" size="small" type="primary">选取文件</el-button>
-          <el-button v-show="!display" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始上传</el-button>
-        </el-upload>
-      </el-col>
-      <!-- 图片预览 -->
-      <el-dialog title="图片预览" :append-to-body="true" :visible.sync="previewVisible" width="50%">
-        <img :src="previewPath" :alt="previewName" style="width:100%;height:100%" />
-      </el-dialog>
-    </section>
+  <section>
+    <el-col :span="8">
+      <div v-show="displayTitle" class="title">
+        <span v-show="displayStar" style="color: red">*</span> {{ title }}
+      </div>
+      <el-upload
+        :disabled="display"
+        class="upload-demo"
+        ref="upload"
+        :multiple="multiple"
+        action="#"
+        :accept="accept"
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
+        :on-change="handleChange"
+        :file-list="fileList"
+        :limit="limit"
+        :on-exceed="handleExceed"
+        :http-request="handleUpload"
+        :auto-upload="false"
+        style="margin-top: 10px; margin-left: 10px"
+      >
+        <el-button v-show="!display" slot="trigger" size="small" type="primary"
+          >选取文件</el-button
+        >
+        <el-button
+          v-show="!display"
+          style="margin-left: 10px"
+          size="small"
+          type="success"
+          @click="submitUpload"
+          >开始上传</el-button
+        >
+      </el-upload>
+    </el-col>
+    <!-- 图片预览 -->
+    <el-dialog
+      title="图片预览"
+      :append-to-body="true"
+      :visible.sync="previewVisible"
+      width="50%"
+    >
+      <img
+        :src="previewPath"
+        :alt="previewName"
+        style="width: 100%; height: 100%"
+      />
+    </el-dialog>
+  </section>
 </template>
 
 <script>
-  import { uploadUrl, downloadUrl, uploadFiles } from '@/api/file'
-  import {getFileExt} from '@/api/util'
-  export default {
-    name: 'upload-component',
-    props: {
-      title: {
-        type: String,
-        default: '附件'
-      },
-      accept: {
-        type: String,
-        default: ''
-      },
-      multiple: {
-        type: Boolean,
-        default: false
-      },
-      limit: {
-        type: Number,
-        default: 5
-      },
-      display: {
-        type: Boolean,
-        default: false
-      },
-      fileObjList: {
-        type: Array,
-        default: () => []
-      },
-      displayTitle: {
-        type: Boolean,
-        default: true
-      },
-      displayStar: {
-        type: Boolean,
-        default: true
-      }
+import { uploadUrl, downloadUrl, uploadFiles } from "@/api/file";
+import { getFileExt } from "@/api/util";
+export default {
+  name: "upload-component",
+  props: {
+    title: {
+      type: String,
+      default: "附件",
     },
-    watch: {
-      fileList (newVal) {
-        this.$emit('uploadSuccess', newVal)
-      },
-      fileObjList (newVal) {
-        this.fileList = newVal
-      }
+    accept: {
+      type: String,
+      default: "",
     },
-    data () {
-      return {
-        fileList: [],
-        uploadUrl: uploadUrl,
-        previewPath: '',
-        previewName: '',
-        previewVisible: false
-      }
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    limit: {
+      type: Number,
+      default: 5,
+    },
+    display: {
+      type: Boolean,
+      default: false,
+    },
+    fileObjList: {
+      type: Array,
+      default: () => [],
+    },
+    displayTitle: {
+      type: Boolean,
+      default: true,
+    },
+    displayStar: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  watch: {
+    fileList(newVal) {
+      this.$emit("uploadSuccess", newVal);
+    },
+    fileObjList(newVal) {
+      this.fileList = newVal;
     },
-    methods: {
-      // 上传
-      submitUpload () {
-        // 判断是否有文件
-        if (this.fileList.length === 0) {
-          return this.$message.warning('请选取文件后再上传')
-        }
-        // 判断是否有重复文件
-        let arr1 = this.fileList.map(i => i.name)
-        let arr2 = [...new Set(arr1)]
-        if (arr1.length !== arr2.length) {
-          return this.$message.warning('请去掉重复文件后再上传')
-        }
+  },
+  data() {
+    return {
+      fileList: [],
+      uploadUrl: uploadUrl,
+      previewPath: "",
+      previewName: "",
+      previewVisible: false,
+    };
+  },
+  methods: {
+    handleUpload(file) {
+      function getBase64(file) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = (error) => reject(error);
+        });
+      }
+
+      return getBase64(file.file).then((res) => {
+        //需要return才会显示上传成功状态，不加return不好使
         // 开始上传
-        const formData = new FormData()
-        this.fileList.forEach((file) => {
-          formData.append('file', file.raw)
-        })
-        uploadFiles(formData).then(({data}) => {
-          if (data && data.code === '200') {
+        const formData = new FormData();
+        formData.append("file", file.raw);
+        uploadFiles(formData).then(({ data }) => {
+          if (data && data.code === "200") {
             data.data.forEach((item) => {
-              let fileData = this.fileList.find((file) => file.name === item.originFileName)
-              fileData.url = item.fileUrl
-            })
-            this.$message.success('上传成功')
+              let fileData = this.fileList.find(
+                (file) => file.name === item.originFileName
+              );
+              fileData.url = item.fileUrl;
+            });
+            this.$message.success("上传成功");
           } else {
-            this.$message.error('上传失败')
+            this.$message.error("上传失败");
           }
-        })
-      },
-      // 移除
-      handleRemove (file, fileList) {
-        this.fileList = fileList
-      },
-      // 预览
-      handlePreview (file) {
-        if (!file || !file.name || !file.url) {
-          this.$message.error('没有可预览的文件！')
-          return
-        }
-        let ext = getFileExt(file.name)
-        if (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif') {
-          this.previewPath = downloadUrl + file.url
-          this.previewName = file.name
-          this.previewVisible = true
-        } else {
-          // 弹出新页面显示下载文件
-          window.open(downloadUrl + file.url, '_blank')
-        }
-      },
-      // 改变上传内容
-      handleChange (file, fileList) {
-        this.fileList = fileList
-      },
-      // 超限
-      handleExceed (files, fileList) {
-        this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+        });
+      });
+    },
+    // 上传
+    submitUpload() {
+      this.$refs.upload.submit();
+      // // 判断是否有文件
+      // if (this.fileList.length === 0) {
+      //   return this.$message.warning("请选取文件后再上传");
+      // }
+      // // 判断是否有重复文件
+      // let arr1 = this.fileList.map((i) => i.name);
+      // let arr2 = [...new Set(arr1)];
+      // if (arr1.length !== arr2.length) {
+      //   return this.$message.warning("请去掉重复文件后再上传");
+      // }
+      // // 开始上传
+      // const formData = new FormData();
+      // this.fileList.forEach((file) => {
+      //   formData.append("file", file.raw);
+      // });
+      // uploadFiles(formData).then(({ data }) => {
+      //   if (data && data.code === "200") {
+      //     data.data.forEach((item) => {
+      //       let fileData = this.fileList.find(
+      //         (file) => file.name === item.originFileName
+      //       );
+      //       fileData.url = item.fileUrl;
+      //     });
+      //     this.$message.success("上传成功");
+      //   } else {
+      //     this.$message.error("上传失败");
+      //   }
+      // });
+    },
+    // 移除
+    handleRemove(file, fileList) {
+      this.fileList = fileList;
+    },
+    // 预览
+    handlePreview(file) {
+      if (!file || !file.name || !file.url) {
+        this.$message.error("没有可预览的文件！");
+        return;
       }
-    }
-  }
+      let ext = getFileExt(file.name);
+      if (ext === "jpg" || ext === "jpeg" || ext === "png" || ext === "gif") {
+        this.previewPath = downloadUrl + file.url;
+        this.previewName = file.name;
+        this.previewVisible = true;
+      } else {
+        // 弹出新页面显示下载文件
+        window.open(downloadUrl + file.url, "_blank");
+      }
+    },
+    // 改变上传内容
+    handleChange(file, fileList) {
+      this.fileList = fileList;
+    },
+    // 超限
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 ${this.limit} 个文件，本次选择了 ${
+          files.length
+        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
+      );
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/modules/tech-manage/material-tech-add-or-update.vue

@@ -123,6 +123,7 @@ export default {
 
       await getMaterialTechDetail(id).then(({ data }) => {
         if (data && data.code === "200") {
+          this.dataForm.optionId = id;
           this.dataForm.productId = data.data.productId;
           this.dataForm.optionCode = data.data.optionCode;
           this.dataForm.optionName = data.data.optionName;