修改了个人模块的图片上传等问题

feige

2024-03-05 4d3ebe187b31d7b9b1827a4e006749deddfc38ae

 ruoyi-ui/src/views/wish/index.vue

@@ -293,6 +293,10 @@
          multiple
          :http-request="requestUpload"
          :file-list="fileList"
		  
        :on-change="handleChange"
        :auto-upload="false"
           ref="upload"
        >
          <i  slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
@@ -326,6 +330,13 @@

          </div>
        </el-upload>
      <el-button
               style="margin-left: 10px"
               size="small"
               type="success"
		
               @click="picUpload"
             >上传到服务器</el-button>
        <h4 class="form-header">其他附件 </h4>
        <el-upload
          action=""
@@ -334,17 +345,63 @@
          multiple

          :on-remove="handleRemoveFile"
          :http-request="requestUpload1"
          :show-file-list="true"
		  
        ref="upload1"
        :on-change="handleChange1"
        :auto-upload="false"
        list-type="picture-card"
          :http-request="requestUpload1"
		    
        >
          <el-button type="primary">点击上传</el-button>
    
          <div v-if="uploading1" class="upload-status">正在上传...</div>
          <template #tip>
            <div class="el-upload__tip">
            </div>
          </template>
        </el-upload>

     <i slot="default" class="el-icon-plus"></i>
             <div slot="file" slot-scope="{file}">
               <!-- 添加video元素用于显示视频 -->
               <video
                 v-if="file.url.includes('.mp4')"
                 class="el-upload-list__item-thumbnail"
                 :src="file.url"
                 style="width: 147px; height: 147px"
                 fit="cover"
               ></video>
               <img v-else
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                    style="width: 100%; height: 100%"
                    fit="cover"></img>
     
               <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-name">{{ file.name }}</span>
                         <span
                           class="el-upload-list__item-preview"
                           @click="handleFileCardPreview(file)"
                         >
                           <i class="el-icon-zoom-in"></i>
                         </span>
                  
                         <span
                   
                           class="el-upload-list__item-delete"
                           @click="handleRemoveFile(file)"
                         >
                           <i class="el-icon-delete"></i>
                         </span>
                   </span>
     
             </div>
     
     
           </el-upload>
        
    <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="fileUpload"
              >上传到服务器</el-button>
      </el-form>
      <h4 class="form-header"> </h4>

@@ -414,6 +471,9 @@
        '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng'],
      
      fileList:[],
      fileList1:[],
      uploadFileList: [],
            uploadFileList1: [],
      fileListOther:[],
      dsb:true,
      btn:false,
@@ -431,7 +491,7 @@
        difficulty:undefined,
        isEffective:undefined,
        remark:undefined,
        url: undefined,
        url: "",

      },
      // 菜单列表
@@ -595,14 +655,20 @@
      for(let i = 0; i < this.fileList.length; i++)
      {
        if(this.fileList[i].url==file.url)
        {
          this.$delete(this.fileList,i);
               this.$delete(this.uploadFileList,i);
               }
      }
    },
    handleRemoveFile(file) {
      for(let i = 0; i < this.fileListOther.length; i++)
      {
        if(this.fileListOther[i].url==file.url)
        {		  
          this.$delete(this.fileListOther,i);
          this.$delete(this.uploadFileList1,i);		  
          }
      }
    },
    // 取消按钮
@@ -698,13 +764,13 @@
    /** 提交按钮（数据权限） */
    submitDataScope: function() {

      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.formDat.url = ul+","+uls
      // 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.formDat.url = ul+","+uls
      this.$refs["elForm"].validate(valid => {
        if (valid) {

@@ -727,40 +793,89 @@
        }
      });
    },
    requestUpload(params)
    {
      var file = params.file;
      var formData = new FormData();
      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})
        }
      })
    },
    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.fileListOther.push({name:response.data.fileName, url:response.data.url})
        }
      })
    },
 
    handleChange(file, fileList1) {
       //定义一个全局数组uploadFileList来做存储
 	
     // this.uploadFileList.push(file.raw);
      console.log("=========5555=========")
      console.log(file)
    //  console.log(this.uploadFileList)
    //  this.fileList = fileList
    //alert(file)
        this.uploadFileList.push(file.raw);
         this.fileList.push({name:file.name,url:file.url})
    //alert(fileList1.length)
    },
    handleChange1(file, fileOtherList1) {
       //定义一个全局数组uploadFileList来做存储
    this.uploadFileList1.push(file.raw);
     this.fileListOther.push({name:file.name,url:file.url})
     // this.uploadFileList.push(file.raw);
      console.log("=========5555=========")
      //console.log(file)
    //  console.log(this.uploadFileList)
    //  this.fileList = fileList
    },
    fileUpload(){
    //   var file = params.file;
 
       var formData = new FormData();
       this.$refs.upload1.submit();
       // formData.append('uploadFile', file);
       if(this.uploadFileList1.length==0){
            this.$modal.msgSuccess("文档上传列表不能为空!");
            return
       }
       this.uploadFileList1.forEach((elem)=>{
          formData.append("files", elem)
 			
       })
 
       let _this = this
 	
       this.uploading = true;
       uploadPic(formData).then(response => {
       _this.uploadFileList1 = []
       _this.formDat.url = _this.formDat.url+","+response.fileNames
       _this.$modal.msgSuccess("文件上传成功!");
         })
 	
    },
    picUpload()
    {
       var formData = new FormData();
       //alert(976)
       //this.$refs.upload.submit();
       //alert(8)
       //alert(this.uploadFileList.length)
    if(this.uploadFileList.length==0){
         this.$modal.msgSuccess("图片上传列表不能为空！");
         return}
    //console.log(this.uploadFileList)
       this.uploadFileList.forEach((elem)=>{
          formData.append("files", elem)
 			
       })
       //alert(90)
       let _this = this
       //alert(9)
        uploadPic(formData).then(response => {
       //   alert("dds")
          _this.formDat.url = _this.formDat.url+","+response.fileNames
         _this.uploadFileList = []
         _this.$modal.msgSuccess("图片上传成功");
 
      });
    },
     requestUpload(params) {
 //alert(98)
  //    this.uploadFileList.push(params.file);
     },
     requestUpload1(params)
     {
       //     this.uploadFileList1.push(params.file);
     },
    /** 删除按钮操作 */
    handleDelete(row) {
      const Ids = row.id || this.ids;