修改上传文件的组件

src/api/index.js

@@ -28,6 +28,7 @@ import InvalidResponse from "./InvalidResponse";
 import event from "./newApi/event";
 import product from "./newApi/product";
 import framework from "./newApi/framework";
+import file from "./newApi/file"
 
 export default {
   ...report,
@@ -56,4 +57,5 @@ export default {
   ...event,
   ...product,
   ...framework,
+  ...file
 }

src/api/newApi/file.js

@@ -1,5 +1,7 @@
 import axios from "@/utils/axios";
 // 新系统事件新接口
 export default {
-  
+  uploadFile(data){
+    return axios.post('/fileManager/uploadNormalFile', data)
+  }
 };

src/icons/icon2/demo_index.html

@@ -55,6 +55,18 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe610;</span>
+                <div class="name">text-replacement</div>
+                <div class="code-name">&amp;#xe610;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">跳过</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe63c;</span>
                 <div class="name">意见反馈</div>
                 <div class="code-name">&amp;#xe63c;</div>
@@ -306,9 +318,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1698304160408') format('woff2'),
-       url('iconfont.woff?t=1698304160408') format('woff'),
-       url('iconfont.ttf?t=1698304160408') format('truetype');
+  src: url('iconfont.woff2?t=1699337484516') format('woff2'),
+       url('iconfont.woff?t=1699337484516') format('woff'),
+       url('iconfont.ttf?t=1699337484516') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -335,6 +347,24 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-wenbentihuan"></span>
+            <div class="name">
+              text-replacement
+            </div>
+            <div class="code-name">.icon-wenbentihuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon--skip"></span>
+            <div class="name">
+              跳过
+            </div>
+            <div class="code-name">.icon--skip
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-yijianfankui"></span>
             <div class="name">
               意见反馈
@@ -714,6 +744,22 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wenbentihuan"></use>
+                </svg>
+                <div class="name">text-replacement</div>
+                <div class="code-name">#icon-wenbentihuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon--skip"></use>
+                </svg>
+                <div class="name">跳过</div>
+                <div class="code-name">#icon--skip</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-yijianfankui"></use>
                 </svg>
                 <div class="name">意见反馈</div>

src/icons/icon2/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4121381 */
-  src: url('iconfont.woff2?t=1698304160408') format('woff2'),
-       url('iconfont.woff?t=1698304160408') format('woff'),
-       url('iconfont.ttf?t=1698304160408') format('truetype');
+  src: url('iconfont.woff2?t=1699337484516') format('woff2'),
+       url('iconfont.woff?t=1699337484516') format('woff'),
+       url('iconfont.ttf?t=1699337484516') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-wenbentihuan:before {
+  content: "\e610";
+}
+
+.icon--skip:before {
+  content: "\e606";
+}
+
 .icon-yijianfankui:before {
   content: "\e63c";
 }

src/icons/icon2/iconfont.json

@@ -6,6 +6,20 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "5978748",
+      "name": "text-replacement",
+      "font_class": "wenbentihuan",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "22922711",
+      "name": "跳过",
+      "font_class": "-skip",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
       "icon_id": "1119363",
       "name": "意见反馈",
       "font_class": "yijianfankui",

src/utils/common.js

@@ -98,6 +98,6 @@ export default {
 
   //查看图片
   checkViewer(guid){
-    return `http://192.168.1.16:8801/fileManager/downloadFile?fileId=${guid}`
+    return `/fileManager/downloadFile?fileId=${guid}`
   },
 }

src/utils/constants.js

@@ -220,6 +220,6 @@ showType:[
     label:'不给谁看',
     value:3
   },
-]
-
+],
+sourceId:process.env.NODE_ENV === 'production'?3:1
 }

src/utils/model/route.vue

@@ -12,7 +12,7 @@
       ]">
       <i slot="reference" class="el-icon-circle-plus-outline" style="font-size:20px;"></i>
     </upload>
-    <!-- <myUpload :multiple="true" accept=".png,.jpg"></myUpload> -->
+    <myUpload :multiple="true" :fileList="[{name:'场景可视化.jpg'}]" accept=".png,.jpg"></myUpload>
 
   </div>
 </template>

src/utils/model/upload/index.vue

@@ -4,6 +4,8 @@
       <div class="myDemo">
         <el-upload
           class="upload-demo"
+          action="#"
+          :auto-upload="false"
           :drag="drag"
           :multiple="multiple"
           :data="data"
@@ -23,7 +25,10 @@
           style="width: 100%"
         >
           <i class="el-icon-upload"></i>
-          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__text">
+            <div>将文件拖到此处，或<em>点击上传</em></div>
+            <div v-if="accept"><span>只能上传{{ accept }}文件</span></div>
+          </div>
         </el-upload>
       </div>
       <div class="line" v-if="fileList.length > 0"></div>
@@ -44,6 +49,69 @@
         </ul>
       </div>
     </div>
+    <el-dialog
+      custom-class="myUpload_dialog"
+      :visible.sync="dialogVisible"
+      width="500px"
+      :before-close="handleClose"
+      :append-to-body="true">
+      <div slot="title">提示信息<span class="title" ><i class="el-icon-warning"></i></span></div>
+      <div>
+        <div v-if="discontent.length>0">
+          <div  class="content">
+            <div>
+              <i class="el-icon-error red"></i>
+            </div>
+            <div @click="showDiscontent = !showDiscontent">
+              <i class="el-icon-caret-right" v-if="!showDiscontent"></i>
+              <i class="el-icon-caret-bottom" v-else></i>
+            </div>
+            <div>
+              上传文件格式不正确
+            </div>
+          </div>
+          <div v-if="showDiscontent" class="list showList">
+            <!-- {{ discontent.map((item) => { return item.name;}).join('，') }} -->
+            <div v-for="(item,index) in discontent" :key="item.name">{{ item.name }}<span v-if="index != discontent.length-1">，</span></div>
+          </div>
+        </div>
+        <div v-if="exist.length>0">
+          <div class="content">
+            <div>
+              <i class="el-icon-error red"></i>
+            </div>
+            <div @click="showExist = !showExist">
+              <i class="el-icon-caret-right" v-if="!showExist"></i>
+              <i class="el-icon-caret-bottom" v-else></i>
+            </div>
+            <div>
+              上传文件名称重复
+            </div>
+          </div>
+          <div v-if="showExist" class="showList">
+            <div class="list">{{ exist.map((item) => { return item.name;}).join('，') }}</div>
+            <div class="menu">
+              <div @click="choose(1)">
+                <i class="el-icon-check"></i>
+                <span>替换目标中的文件</span>
+              </div>
+              <div @click="choose(2)">
+                <i class="iconfont icon--skip"></i>
+                <span>跳过这些文件</span>
+              </div>
+              <!-- <div @click="choose(3)">
+                <i class="iconfont icon-wenbentihuan"></i>
+                <span>让我决定每个文件</span>
+              </div> -->
+            </div>
+          </div>
+        </div>
+        
+      </div>
+      <div slot="footer">
+        <el-button type="primary" size="small" @click="handleClose" >我知道了</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -103,6 +171,11 @@ export default {
   data() {
     return {
       discontent: [],
+      showDiscontent:false,
+      exist:[],
+      exist2:[],
+      showExist:false,
+      dialogVisible:false,
     };
   },
   watch: {},
@@ -126,6 +199,11 @@ export default {
       this.$emit("on-progress", event, file, fileList);
     },
     onChange(file, fileList) {
+      this.$nextTick(() => {
+        if(this.discontent.length>0 || this.exist.length>0){
+          this.open()
+        }
+      });
       if (this.accept) {
         var arr = this.accept.split(/,|，/g);
         var fileType = file.name.substring(file.name.lastIndexOf("."));
@@ -136,31 +214,83 @@ export default {
           this.discontent.push(file);
           return false;
         }
+        
       }
-      this.$emit("on-change", file);
-      this.$nextTick(() => {
-        if (this.discontent.length > 0) {
-          var arr = this.discontent.map((item) => {
-            return item.name;
-          });
-          this.$alert(`您上传的<span style='color:red'>${arr.join("，")}</span>等文件格式不正确，请上传<span style='color:blue'>${this.accept.replace(/,|，/g,"，")}</span>等格式文件`,"提示",
-            {
-              dangerouslyUseHTMLString: true,
-              confirmButtonText: "确定",
-              type: "warning",
-              callback: (action) => {
-                this.discontent = [];
-              },
-            }
-          );
+      if(this.fileList.length>0){
+        var index = this.fileList.findIndex(item =>{
+          return item.name == file.name || item.originalName == file.name
+        })
+        if(index != -1){
+          this.exist.push(file)
+          this.exist2.push(this.fileList[index])
+          return false
+        }else{
+          if(this.autoUpload){
+            this.uploadFile(file)
+            return false
+          }
         }
-      });
+      }
+      this.$emit("on-change", file);
+    
     },
     onExceed(file, fileList) {
       this.$emit("on-exceed", file, fileList);
     },
-    //查看图片
-    checkFiles(file) {},
+    //查看文件
+    checkFiles(file) {
+      if(file.guid){
+
+      }else{
+
+      }
+    },
+    //上传附件
+    uploadFile(file){
+      let formData = new FormData()
+      formData.append('sourceId',this.$constants.sourceId)
+      formData.append('files',file.raw)
+      this.$api.uploadFile(formData).then(response=>{
+        if(response.code == 200){
+          file.guid = response.data
+          file.raw.guid = response.data
+          this.$emit("on-change", file)
+        }
+        
+      })
+    },
+    //打开提示弹窗
+    open(){
+      this.dialogVisible = true
+    },
+    //关闭弹窗
+    handleClose(){
+      this.dialogVisible = false
+      this.discontent = []
+      this.exist = []
+      this.exist2=[]
+      this.showDiscontent=false
+      this.showExist = false
+    },
+    //操作
+    choose(type){
+      switch(type){
+        case 1:
+          this.exist2.forEach((item,index)=>{
+            this.onRemove(item,this.fileList)
+            this.$emit("on-change", this.exist[index]);
+            this.uploadFile(this.exist[index])
+          })
+          this.handleClose()
+          break;
+        case 2:
+          this.handleClose()
+          break;
+        case 3:
+          break;
+      }
+    },
+ 
   },
 };
 </script>
@@ -183,6 +313,82 @@ export default {
     display: none;
   }
 }
+.myUpload_dialog{
+  border: 2px solid var(--bg);
+  box-shadow: none;
+  --fs:15px;
+  i{
+    cursor: pointer;
+  }
+  .el-dialog__close{
+    color: black;
+    font-weight: bold;
+  }
+  .el-dialog__headerbtn{
+    top: 14px;
+  }
+  .el-dialog__header{
+    border-bottom: 2px solid var(--bg) !important;
+    color: red;
+    padding: 10px;
+  }
+  .el-dialog__body{
+    padding: 20px 10px;
+  }
+  .el-dialog__footer{
+    border-top:none !important;
+  }
+  .title{
+    margin-left: 10px;
+  }
+  .content{
+    display: flex;
+    align-items: center;
+    padding: 5px 0px;
+    color: var(--bg);
+    font-size: var(--fs);
+    font-family: var(--fm);
+    font-weight: bold;
+  }
+  .red{
+    color: red;
+  }
+  .showList{
+    padding-left:var(--fs) ;
+  }
+  .list{
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-size: 14px;
+    display: flex;
+    flex-wrap: wrap;
+    // overflow: hidden;
+    // white-space: nowrap;
+    // text-overflow:ellipsis;
+  }
+  .menu{
+    font-size: 14px;
+    i{
+      font-size: 14px;
+    }
+    div{
+      font-family: var(--fm);
+      padding: 5px 0;
+      cursor: pointer;
+      color: var(--bg);
+      i{
+        color: blue;
+      }
+        span{
+          margin-left:10px
+        }
+    }
+    div:hover{
+      background: #85afd9;
+    }
+  }
+  
+}
 </style>
 <style lang="scss" scoped>
 .myUpload {

vue.config.js

@@ -113,6 +113,12 @@ module.exports = {
         ws: true,
         changeOrigin: true
       },
+      '/fileManager': {
+        target: 'http://192.168.1.16:8801',
+        ws: true,
+        changeOrigin: true
+      },
+      
       // '/api/v2': {
       //   target: 'http://192.168.1.24:8877',
       //   ws: true,