新增和详情中的两个上传不会同时显示“正在上传”，详情中对图片和附件的修改直接调用接口，上传图片的地方只能上传图片

Tcsm

2023-10-08 2ac52508980a33006a1596c43c4fc8daaaa5d19f

 ruoyi-ui/src/views/contacts/contactsInfo.vue

@@ -75,16 +75,12 @@
            <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
          </el-form-item>
           </el-cow>
           <el-cow >
             <el-form-item label="是否是本家庭记录" prop="ownData">
               <el-input  v-model="formData.ownData=== 1 ? '是':'否'" placeholder=" " clearable :style="{width: '100%'}" :disabled=true></el-input>
             </el-form-item>
           </el-cow>
         </el-row>
       </el-container>
      <h4 class="form-header">电子名片 </h4>
      <el-upload
        action="#"
        accept="image/jpeg, image/png,image/jpg, image/WMF,image/gif"
        list-type="picture-card"
        multiple
        :http-request="requestUpload"
@@ -99,7 +95,7 @@
            class="el-upload-list__item-thumbnail"
            :src="file.url"
            alt=""
            style="width: 147px; height: 147px"
            style="width: 100%; height: 100%; object-fit: cover;"
            fit="cover"
            :preview-src-list="[file.url]"
          >
@@ -140,13 +136,13 @@
        list-type="picture-card"
        :on-preview="handleFileCardPreview"
        :on-remove="handleRemoveFile"
        :http-request="requestUpload"
        :http-request="requestUpload1"
        :show-file-list="true"
        :disabled="!btn"
        :class="{ hide: !btn }"
      >
        <div v-if="uploading" class="upload-status">正在上传...</div>
        <i v-if="!uploading" slot="default" class="el-icon-plus"></i>
        <div v-if="uploading1" class="upload-status">正在上传...</div>
        <i v-if="!uploading1" slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
@@ -202,6 +198,7 @@
import {blobValidate} from "@/utils/ruoyi";
import errorCode from "@/utils/errorCode";
import {Message} from "element-ui";
import {updateCollection} from "@/api/collection";
export default {
  components: {},
  props: [],
@@ -219,6 +216,7 @@
      btn:false,
      isShow:true,
      uploading: false,
      uploading1: false,
      // 通讯录表格数据
      contactList: [],

@@ -383,11 +381,23 @@
        saveAs(blob, filename)
      })
    },
    handleRemoveFile(file) {
    handleRemoveFile(file,) {
      for(let i = 0; i < this.fileListOther.length; i++)
      {
        if(this.fileListOther[i].url==file.url)
          this.$delete(this.fileListOther,i);
        let ul = this.fileList.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
        let uls = this.fileListOther.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
        this.formData.url = ul+","+uls;
        updateContact(this.formData).then(response => {
          this.$modal.msgSuccess("删除成功");
          // this.open = false;
          // this.btn=false
        });
      }
    },
    handleRemove(file) {
@@ -395,6 +405,18 @@
      {
        if(this.fileList[i].url==file.url)
          this.$delete(this.fileList,i);
        let ul = this.fileList.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
        let uls = this.fileListOther.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
        this.formData.url = ul+","+uls;
        updateContact(this.formData).then(response => {
          this.$modal.msgSuccess("删除成功");
          // this.open = false;
          // this.btn=false
        });
      }
    },
    handleFileCardPreview(file){
@@ -433,10 +455,44 @@
      formData.append('uploadFile', file);
      let _this = this
      this.uploading = true;

      uploadPic(formData).then(response => {
        let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
        this.uploading = false;
        this.$modal.msgSuccess("上传成功");
        if(_this.fot.includes(pth) === true)
        {
          _this.fileList.push({name:response.data.fileName, "url":response.data.url})
          let ul = this.fileList.map(function (elem){
            return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
          }).join(",")
          let uls = this.fileListOther.map(function (elem){
            return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
          }).join(",")
          this.formData.url = ul+","+uls
          console.log(this.formData.url)
          updateContact(this.formData).then(response => {
            this.$modal.msgSuccess("图片上传成功");
            // this.open = false;
            // this.btn=false
          });
        }
        else{
          _this.fileListOther.push({name:response.data.fileName, url:response.data.url})

        }
      })
    },
    requestUpload1(params)
    {
      var file = params.file;
      var formData = new FormData();
      formData.append('uploadFile', file);
      let _this = this
      this.uploading1 = true;
      uploadPic(formData).then(response => {
        let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
        this.uploading1 = false;
        // this.$modal.msgSuccess("上传成功");
        if(_this.fot.includes(pth) === true)
        {
          _this.fileList.push({name:response.data.fileName, "url":response.data.url})
@@ -445,18 +501,22 @@

        else{
          _this.fileListOther.push({name:response.data.fileName, url:response.data.url})

          let ul = this.fileList.map(function (elem){
            return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
          }).join(",")
          let uls = this.fileListOther.map(function (elem){
            return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
          }).join(",")
          this.formData.url = ul+","+uls
          console.log(this.formData.url)
          updateContact(this.formData).then(response => {
            this.$modal.msgSuccess("文档上传成功");
            // this.open = false;
            // this.btn=false
          });
        }
      })

    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('/zfContact/export', {
        ...this.queryParams
      }, `zfContact_${new Date().getTime()}.xlsx`)
    }

  }
}