提交上传的图像的代码

feige

2024-03-29 0188d5c81ee28ab2f42edc5d1db67c9cdb0db42d

提交上传的图像的代码

 ruoyi-ui/src/api/travel/index.js

@@ -50,7 +50,7 @@
//上传文件
export function uploadPic(data) {
  return request({
    url: '/common/upload',
    url: '/common/uploads',
    method: 'post',
    data: data
  })

 ruoyi-ui/src/views/bignote/familyeventInfo.vue

@@ -240,6 +240,7 @@
        remark: undefined,
        url: "",
      },
      ID: undefined,
      dialogImageUrl: '',
      url1:undefined,
      dialogVisible: false,
@@ -292,7 +293,7 @@
      this.isShow=false
     //       alert(this.btn)
    }

    this.ID = id; 
    let _this = this
    if (id) {
      this.loading = true;
@@ -576,10 +577,48 @@
        //console.log(_this.fileList)
    //    alert(response.fileNames)
          _this.formData.url = _this.formData.url+","+response.fileNames
		  
        _this.uploadFileList = []
         // alert(87)
          updateFamilyevent(_this.formData).then(response => {
            _this.$modal.msgSuccess("图片上传成功");
            let id = _this.ID
            if (id) {
              _this.loading = true;
              getFamilyeventInfo(id).then((response) => {
                _this.formData = response.data;
                alert(123)
                let paths = _this.formData.url.split(",");
                for(let i = 0; i < paths.length; i++)
                {
                  if(paths[i]!="") {
			
                    let pth = paths[i].substr(paths[i].length - 4, paths[i].length)
                //    alert(pth)
                    if (_this.fot.includes(pth) === true)
                    {
                        if(paths[i][0]=="/")
                      _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
                      else
                         _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})
                      }
                    else {
                      // alert(paths[i])
                     // alert()
                      let nms = paths[i].split("\/")
                      let nm = nms[nms.length - 1]
                      if(paths[i][0]=="/")
                      _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
                        else
                        _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})
						
                    }
                  }
                //  _this.fileList1 = _this.fileList
                }
                _this.loading = false;
              });
            }
            // this.open = false;

          });

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

@@ -373,6 +373,8 @@
          multiple
          :http-request="requestUpload"
          :file-list="fileList"
          :on-change="handleChange"
          :auto-upload="false"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
@@ -404,6 +406,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=""
@@ -412,16 +421,63 @@
          multiple

          :on-remove="handleRemove"
          :http-request="requestUpload"
          :show-file-list="true"
        >
          <el-button type="primary">上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
            </div>
          </template>
        </el-upload>

		  
          ref="upload1"
          :on-change="handleChange1"
          :auto-upload="false"
          list-type="picture-card"
            :http-request="requestUpload1"

        >
     
     <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>
      </el-form>
      <el-form ref="elForm" :model="formDat" :rules="rules1" size="medium" label-width="100px">
        <h4 class="form-header">费用明细 </h4>
@@ -527,9 +583,10 @@

      fileList:[
      ],
      fileListOther:[

      ],
      fileList1:[],
            uploadFileList: [],
              uploadFileList1: [],
      fileListOther:[],
      dsb:true,
      btn:false,
      formDat: {
@@ -543,7 +600,7 @@
        self: undefined,
        remark: undefined,
        groupTotal:undefined,
        url: undefined,
        url: "",
        otherCost: undefined,
        backInfo: undefined
      },
@@ -884,13 +941,13 @@
      const id = this.row.id

      this.formDat.cid = id;
      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
      console.log(this.formDat)
      this.$refs["elForm"].validate(valid => {
        if (valid) {
@@ -898,15 +955,29 @@
          addTravelBase(this.formDat).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.centerDialogVisible = false;
            this.open = false;
            // 清空formDat对象的数据
            Object.keys(this.formDat).forEach(key => {
              this.formDat[key] = '';
            });
            for(let i = 0; i <= this.fileList.length; i++)
            {
              this.handleRemove(this.fileList[0]);
            }
            for(let i = 0; i < this.fileListOther.length; i++){
              this.handleRemoveFile(this.fileListOther[0]);
            }
	
			
            this.getList();
          });
        }
      });
      Object.keys(this.formDat).forEach(key => {
        this.formDat[key] = '';
      });
      this.handleRemove(this.fileList[0]);
      this.handleRemoveFile(this.fileListOther[0]);
      // Object.keys(this.formDat).forEach(key => {
      //   this.formDat[key] = '';
      // });
      // this.handleRemove(this.fileList[0]);
      // this.handleRemoveFile(this.fileListOther[0]);
    },
    //  弹窗
    handleShow(row){
@@ -959,11 +1030,42 @@
      });
    },


  handleRemove(file) {
        //alert(98)
        //alert(this.fileList.length)
     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);
         }
     }
     // let ul = this.fileList.map(function (elem){
     //   return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
     // }).join(",")
     // alert(this.fileListOther.length)
     // let uls = this.fileListOther.map(function (elem){
     //   return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
     // }).join(",")
     // this.formDat.url = ul+","+uls;
    },
    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);		  
          }
      }
    },
    handlePictureCardPreview(file) {
        //alert(123)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    /** 提交按钮（数据权限） */
    submitDataScope: function() {

@@ -986,29 +1088,87 @@
      this.handleRemove(this.fileList[0]);
      this.handleRemoveFile(this.fileListOther[0]);
    },
    requestUpload(params)
    {
      var file = params.file;
    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();
      formData.append('uploadFile', file);
        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 => {
        let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)

        if(_this.fot.includes(pth) === true)
        {
          _this.fileList.push({name:response.data.fileName, "url":response.data.url})

        }

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

        }
        _this.uploadFileList1 = []
        _this.formDat.url = _this.formDat.url+","+response.fileNames
        alert(_this.formDat.url)
        _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
                  //  alert(_this.formDat.url)
              _this.uploadFileList = []
              _this.$modal.msgSuccess("图片上传成功");
	
          });
        },
        requestUpload(params) {
    //alert(98)
     //    this.uploadFileList.push(params.file);
        },

    /** 删除按钮操作 */
    handleDelete(row) {
      const Ids = row.id || this.ids;

 ruoyi-ui/src/views/travel/travelInfo.vue

@@ -75,8 +75,15 @@
          action="#"
          list-type="picture-card"
          multiple
  
		  
		  
          ref="upload"
                          :show-file-list="true"
          :http-request="requestUpload"
          :file-list="fileList"
               :on-change="handleChange"
                :auto-upload="false"
          :disabled="!btn"
          :class="{ hide: !btn }"
        >
@@ -118,7 +125,13 @@

          </div>
        </el-upload>

     <el-button
                  style="margin-left: 10px"
                  size="small"
                  type="success"
                  v-if="btn"
                  @click="picUpload"
                >上传到服务器</el-button>
        <h4 class="form-header">其他附件 </h4>
        <el-upload
          action=""
@@ -127,9 +140,17 @@
          multiple
          list-type="picture-card"
          :on-preview="handleFileCardPreview"
          :on-remove="handleRemoveFile"
          :http-request="requestUpload"
   
     
          :show-file-list="true"
		  
		  
          ref="upload1"
          :on-remove="handleRemoveFile"
               :http-request="requestUpload1"
		  
                  :on-change="handleChange1"
                          :auto-upload="false"
          :disabled="!btn"
          :class="{ hide: !btn }"
        >
@@ -179,7 +200,14 @@


        </el-upload>

     <el-button
                  style="margin-left: 10px"
                  size="small"
                  type="success"
                  v-if="btn"
                  @click="fileUpload"
                >上传到服务器</el-button>
                      <h4 class="form-header"> </h4>
        <el-form-item size="large">
          <el-button v-if="isShow" type="primary" @click="submitForm" :disabled="dsb">修改</el-button>
        </el-form-item>
@@ -211,6 +239,9 @@
    
      fileList:[
      ],
     fileList1:[],
     uploadFileList:[],
     uploadFileList1:[],
      fileListOther:[

      ],
@@ -232,7 +263,7 @@
        stay:undefined,
        flight:undefined,
        document:undefined,
        url: undefined,
        url: "",
      },
      dialogImageUrl: '',
      dialogVisible: false,
@@ -300,25 +331,39 @@
          if(paths[i]!="") {

            let pth = paths[i].substr(paths[i].length - 4, paths[i].length)

        //    alert(pth)
            if (_this.fot.includes(pth) === true)
            {
                if(paths[i].includes("https"))
                _this.fileList.push({name:paths[i],url: paths[i]})
              _this.fileList.push({name:paths[i],url: paths[i],res:false})
                else
              _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i]})
              {
                  if(paths[i][0]=="/")
                  _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
                  else
                 _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})
              }
              }
            else {
              // alert(paths[i])
             // alert()
              if(paths[i].includes("https"))
              _this.fileListOther.push({name:paths[i],url: paths[i]})
               _this.fileListOther.push({name:paths[i],url: paths[i],res:false})
              else{
              let nms = paths[i].split("\/")
              let nm = nms[nms.length - 1]
              _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i]})
              if(paths[i][0]=="/")
              _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
                else
                _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})
				
              }
            }
          }
			
			
			
    
        }
        this.loading = false;
      });
@@ -373,18 +418,83 @@
      })
    },
    handleRemoveFile(file) {
     //判读是否是之前的图片
     let res = false
      for(let i = 0; i < this.fileListOther.length; i++)
      {
        if(this.fileListOther[i].url==file.url)
       {
           if(this.fileListOther[i].res==false)
               res = true
           else
           {
               this.$delete(this.uploadFileList1, Math.abs(i - this.uploadFileList1.length-1))
           }
          this.$delete(this.fileListOther,i);
   
       }
     }
     
     let ul = ""
     this.fileList.map(function (elem){
             if(elem.res==false)
                 ul = ul + ","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
     })
     let uls = ""
     this.fileListOther.map(function (elem){
       if(elem.res==false)
                 uls = uls +","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
     })
     this.formData.url = ul+","+uls;
   //  alert(this.formData.url)
     if(res==true){
         updateTravelBase(this.formData).then(response => {
           this.$modal.msgSuccess("删除成功");
           // this.open = false;
   	  
         });
      }
    },
    handleRemove(file) {
             //判断是否是之前的图片
     let res = false
   //  alert(this.fileList.length)
      for(let i = 0; i < this.fileList.length; i++)
      {
        if(this.fileList[i].url==file.url)
          this.$delete(this.fileList,i);
       {
           //原来图像标记为false
           //alert(this.fileList[i].res)
         if(this.fileList[i].res==false)
           res = true
         else
         {
           //  alert(this.uploadFileList.length)
           //  alert(87)
            this.$delete(this.uploadFileList, Math.abs(i - this.uploadFileList.length-1))
                //      alert(this.uploadFileList.length)
      }
         this.$delete(this.fileList,i);
      
     }
     }
     let ul = ""
     this.fileList.map(function (elem){
       if(elem.res==false)
           ul = ul + ","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
     })
     let uls = ""
     this.fileListOther.map(function (elem){
       if(elem.res==false)
           uls = uls +","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
     })
     this.formData.url = ul+","+uls;
     if(res==true){
         updateTravelBase(this.formData).then(response => {
           this.$modal.msgSuccess("删除成功");
         });
     }
   
    },
    handleFileCardPreview(file){
      this.dialogFileUrl = file.url;
@@ -422,30 +532,126 @@
      this.btn = true
      this.isShow=false
    },
    requestUpload(params)
    {
      var file = params.file;
    
    //自定义上传方法
        handleChange(file, fileList1) {
           //定义一个全局数组uploadFileList来做存储
    
         // this.uploadFileList.push(file.raw);
          console.log("=========5555=========")
          this.uploadFileList.push(file.raw);
           this.fileList.push({name:file.name,url:file.url,res:true})
        },
        //自定义上传方法
        handleChange1(file, fileListOther1) {
               //定义一个全局数组uploadFileList来做存储
    	
             // this.uploadFileList.push(file.raw);
             this.uploadFileList1.push(file.raw);
              this.fileListOther.push({name:file.name,url:file.url,res:true})
              console.log("=========5555=========")
              //console.log(file)
            //  console.log(this.uploadFileList)
            //  this.fileList = fileList
        },
        fileUpload(){
        //    var file = params.file;
    
      var formData = new FormData();
      formData.append('uploadFile', file);
            //this.$refs.upload1.submit();
        //    alert(this.uploadFileList1.length)
            // formData.append('uploadFile', file);
            if(this.uploadFileList1.length==0){
                  this.$modal.msgSuccess("文档上传列表不能为空！");
                  return}
    		
            this.uploadFileList1.forEach((elem)=>{
                formData.append("files", elem)
    			
            })
            console.log(this.uploadFileList1)
      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})

        }

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

        }
            _this.uploadFileList1 = []
              _this.formData.url = _this.formData.url+","+response.fileNames
                updateTravelBase(_this.formData).then(response => {
                  this.$modal.msgSuccess("文档上传成功");
                  // this.open = false;
                });
      })

    },
        picUpload()
        {
    
            var formData = new FormData();
            //this.$refs.upload.submit();
            //alert(this.uploadFileList.length)
        if(this.uploadFileList.length==0){
              this.$modal.msgSuccess("图像上传列表不能为空！");
              return}
    
            this.uploadFileList.forEach((elem)=>{
                formData.append("files", elem)
    			
            })
            let _this = this
    
    		
            uploadPic(formData).then(response => {
                // console.log(response.originalFilenames)
                // console.log(response.urls)
                // console.log(response.fileNames)
                //         console.log(response.newFileNames)
            // let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
            // _this.uploading1= false;
            // console.log(_this.fot.includes(pth))
            // // debugger
            // 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(",")
            //console.log(_this.fileList)
        //    alert(response.fileNames)
              _this.formData.url = _this.formData.url+","+response.fileNames
            _this.uploadFileList = []
             // alert(87)
              updateTravelBase(_this.formData).then(response => {
                _this.$modal.msgSuccess("图片上传成功");
                // this.open = false;
    
              });
            // }
            // else{
            //   _this.fileListOther.push({name:response.data.fileName, url:response.data.url})
    
            // }
          });
        },
         requestUpload(params)
        {
       //  alert(124)
    //     this.uploadFileList.push(params.file);
    
         //alert(34)
     
    	
        },
        requestUpload1(params)
        {
        //    alert(123)
       // this.uploadFileList1.push(params.file);
      //  console.log("-----------")
        //console.log(this.uploadFileList1)
        },
    

    /** 导出按钮操作 */
    handleExport() {