魅宠图像

feige

2023-11-19 090bce038b881a55f6453f49a8ae93c5697cf718

 ruoyi-ui/src/views/pet/petInfo.vue

@@ -139,15 +139,34 @@
        <el-col :span="6" :data="petList">
          <div class="block" :model="petList" >
            <el-col v-model="petList.headPicture" prop="headPicture">
              <el-avatar shape="square" :size=200 >
            <!--  <el-avatar shape="square" :size=200 >
                <el-image
                  :src="'http://47.93.189.255:8080/'+ petList.headPicture"
                  :src="'https://www.bendudu.com:8080/'+ petList.headPicture"
                  :fit="fit" style="width: 100%;height: 100%;border-radius: 0px 0px 0px 0px;opacity: 1;border: 1px solid rgba(0,0,0,0.5);"
                ></el-image>
              </el-avatar>
              </el-avatar> -->
             <el-upload ref="upload1"
                               action=""
                               :file-list="fileListOther"
                               list-type="picture-card"
                               accept="image/*"
                               :multiple="false"
                               :http-request="requestUpload1"
                               :on-success="handleSucess"
                               :limit="1">

                      <el-avatar shape="square"  style="width: 200px;;height: 200px;" >
                         <el-image
                           :src="'https://www.bendudu.com:8080/'+ petList.headPicture"
                           :fit="fit" style="width: 100%;height: 100%;border-radius: 0px 0px 0px 0px;opacity: 1;border: 1px solid rgba(0,0,0,0.5);"
                         ></el-image>


                       </el-avatar>
                    </el-upload>
            </el-col>
          </div>
          <el-button  v-if="isShow" type="primary" @click="submitForm" :disabled="dsb">修改魅宠信息</el-button>
<!--          <el-button  v-if="isShow" type="primary" @click="submitForm" :disabled="dsb">修改魅宠信息</el-button> -->
        </el-col>
      </div>
    </el-container>
@@ -212,19 +231,33 @@
      <el-col :span="6" :data="petList">
        <div class="block" :model="petList" >
          <el-col v-model="petList.fullPicture" prop="fullPicture">
            <el-avatar shape="square"  style="width: 1000px;;height: 500px;" >
              <el-image
                :src="'http://47.93.189.255:8080/'+ petList.fullPicture"
                :fit="fit" style="width: 100%;height: 100%;border-radius: 0px 0px 0px 0px;opacity: 1;border: 1px solid rgba(0,0,0,0.5);"
              ></el-image>
              <el-upload class="upload-demo" action="/uploadImage" :on-success="handleUploadSuccess">
                <el-button slot="trigger">点击上传新图片</el-button>

       <el-upload ref="upload"
                         action=""
                         :file-list="fileList"
                         list-type="picture-card"
                         accept="image/*"
                         :multiple="false"
                         :http-request="requestUpload"
                         :on-success="handleSucess"
                         :limit="1">

                <el-avatar shape="square"  style="width: 1000px;;height: 500px;" >
                   <el-image
                     :src="'https://www.bendudu.com:8080/'+ petList.fullPicture"
                     :fit="fit" style="width: 100%;height: 100%;border-radius: 0px 0px 0px 0px;opacity: 1;border: 1px solid rgba(0,0,0,0.5);"
                   ></el-image>


                 </el-avatar>
              </el-upload>

            </el-avatar>



          </el-col>
        </div>
        <el-button>修改</el-button>

      </el-col>
    </div>

@@ -416,6 +449,7 @@
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      btn: false,
      // 表单校验
      rules: {
        animal: [{
@@ -536,6 +570,7 @@
      getPetList(id).then((response) => {
        this.petList = response.data;
        console.log(this.petList)
        alert(this.petList.headPicture)
        this.loading = false;
      });
      // getPetowner(id).then((response) => {
@@ -561,26 +596,13 @@
          //  alert(123)
          //   console.log(response.data)
          this.PetNoteList = response.data.data;
          
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    requestUpload(params)
    {
      var file = params.file;
      var formData = new FormData();

      formData.append('uploadFile', file);
      let _this = this

      uploadPic(formData).then(response => {
        let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
        _this.fileList1.push({name:response.data.fileName, url:response.data.url})
        console("ok")
      })

    },
    requestUpload2(params)
    {
      var file = params.file;
@@ -708,13 +730,71 @@
      this.dsb = false
      this.btn = true
    },
    handleSucess()
    {
     // alert(15)
      this.$refs.upload.clearFiles();
    },
    requestUpload(params)
    {
      var file = params.file;
      var formData = new FormData();
      formData.append('uploadFile', file);
      let _this = this

      this.$refs.upload.clearFiles();
    //  this.uploading1 = true;
    //alert(100)
    uploadPic(formData).then(response => {
     // alert(18)
     // let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
   //   _this.fileList1.push({name:response.data.fileName, url:response.data.url})
   //   console("ok")
    //  alert(90)
    //  alert(response.data.url)
      _this.petList.fullPicture =  response.data.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
      updatePet(_this.petList).then(response => {
        _this.$modal.msgSuccess("图像修改成功");
        // this.open = false;
        _this.btn=false
      });
     // alert(100)
    })
      //alert(90)
     },
requestUpload1(params)
    {
      var file = params.file;
      var formData = new FormData();
      formData.append('uploadFile', file);
      let _this = this

      this.$refs.upload1.clearFiles();
    //  this.uploading1 = true;
    //alert(100)
    uploadPic(formData).then(response => {
     // alert(18)
     // let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
   //   _this.fileList1.push({name:response.data.fileName, url:response.data.url})
   //   console("ok")
    //  alert(90)
    //  alert(response.data.url)
      _this.petList.headPicture =  response.data.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
      updatePet(_this.petList).then(response => {
        _this.$modal.msgSuccess("修改成功");
        // this.open = false;
        _this.btn=false
      });
     // alert(100)
    })
      //alert(90)
     },

  }
}

</script>
<style scoped lang="scss">
<style scoped>
.mt
{
  position: relative;
@@ -723,7 +803,7 @@
  display: block;

}
.hide .el-upload--picture-card {
.hide /deep/ .el-upload--picture-card {
  display: none;
}
.form{