新增家谱图，完善各模块新增时的电子文件上传功能，在上传期间显示正在上传

Tcsm

2023-08-14 6afb98b81fa4b4b3223d53d42a891fb89862d38b

 ruoyi-ui/src/views/self/show.vue

@@ -118,37 +118,50 @@
      </div>
      <div style="padding-left:30px;padding-top:30px">
        <el-col :span="6" :data="individualList">
          <div class="block" :model="individualList" >
            <el-col v-model="individualList.img" prop="img">
              <el-avatar shape="square" style="width: 200px;height: 150px;" >
          <div class="block" :model="individualList">
            <div v-if="!isEditing">
              <el-avatar shape="square" style="width: 200px; height: 150px;">
                <el-image
                  :src="'http://47.93.189.255:8080/'+ individualList.img"
                  class="el-upload-list__item-thumbnail"
                  v-if="!individualList.img"
                  src="default-avatar-url"
                  :fit="fit"
                  style="width: 100%;height: 100%;"
                  style="width: 100%; height: 100%;"
                ></el-image>
                <el-image
                  v-else
                  :src="'http://47.93.189.255:8080/' + individualList.img"
                  :fit="fit"
                  style="width: 100%; height: 100%;"
                ></el-image>
              </el-avatar>
<!--              <el-upload-->
<!--                action="#"-->
<!--                list-type="picture-card"-->
<!--                multiple-->
<!--                :http-request="requestUpload"-->
<!--                :file-list="fileList"-->
<!--              >-->
<!--                <i slot="default" class="el-icon-plus"></i>-->
<!--                <div slot="file" slot-scope="{file}">-->
<!--                  <img-->
<!--                    class="el-upload-list__item-thumbnail"-->
<!--                    :src="file.url"-->
<!--                    alt=""-->
<!--                    style="width: 147px; height: 147px"-->
<!--                    fit="cover"-->
<!--                    :preview-src-list="[file.url]"-->
<!--                  >-->
<!--                </div>-->
<!--              </el-upload>-->
         </el-col>
            </div>
            <el-upload v-else
                       class="upload-demo"
                       action="#"
                       :auto-upload="false"
                       :http-request="requestUpload"
                       :limit="1"
                       :file-list="fileList"
            >
              <el-avatar shape="square" style="width: 200px; height: 150px;">
                <el-image
                  class="el-upload-list__item-thumbnail"
                  v-if="!individualList.img"
                  src="default-avatar-url"
                  :fit="fit"
                  style="width: 100%; height: 100%;"
                ></el-image>
                <el-image
                  v-else
                  :src="'http://47.93.189.255:8080/' + individualList.img"
                  :fit="fit"
                  style="width: 100%; height: 100%;"
                ></el-image>
              </el-avatar>
            </el-upload>
            <div class="edit-text" v-if="isEditing" @click="uploadImage">点击更换图片</div>
          </div>

        </el-col>

      </div>
@@ -278,13 +291,13 @@
          <el-table-column label="开始日期" prop="startDate" sortable width="250" align="center" >
            <template slot-scope="scope">
              <template v-if="!scope.row.isEdit">{{ scope.row.startDate }}</template>
              <template v-else><el-input v-model="scope.row.startDate"></el-input></template>
              <template v-else><el-input v-model="scope.row.startDate" type="date" placeholder="选择日期"></el-input></template>
            </template>
          </el-table-column>
          <el-table-column label="结束日期" prop="endDate" sortable width="250" align="center" >
            <template slot-scope="scope">
              <template v-if="!scope.row.isEdit">{{ scope.row.endDate }}</template>
              <template v-else><el-input v-model="scope.row.endDate"></el-input></template>
              <template v-else><el-input v-model="scope.row.endDate" type="date" placeholder="选择日期"></el-input></template>
            </template>
          </el-table-column>
          <el-table-column label="主要学习经历、工作单位及任职情况" prop="content" sortable width="350" align="center" >
@@ -404,13 +417,13 @@
          <el-table-column label="开始时间" prop="startTime"  sortable width="230" align="center">
            <template slot-scope="scope">
              <template v-if="!scope.row.isEdit">{{ scope.row.startTime }}</template>
              <template v-else><el-input v-model="scope.row.startTime"></el-input></template>
              <template v-else><el-input v-model="scope.row.startTime" type="date" placeholder="选择日期"></el-input></template>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" prop="endTime"  sortable width="230" align="center">
            <template slot-scope="scope">
              <template v-if="!scope.row.isEdit">{{ scope.row.endTime }}</template>
              <template v-else><el-input v-model="scope.row.endTime"></el-input></template>
              <template v-else><el-input v-model="scope.row.endTime" type="date" placeholder="选择日期"></el-input></template>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -439,13 +452,13 @@
          <el-table-column label="开始时间" prop="startTime"  sortable width="200" align="center">
            <template slot-scope="scope">
              <template v-if="!scope.row.isEdit">{{ scope.row.startTime }}</template>
              <template v-else><el-input v-model="scope.row.startTime"></el-input></template>
              <template v-else><el-input v-model="scope.row.startTime" type="date" placeholder="选择日期"></el-input></template>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" prop="endTime"  sortable width="200" align="center">
            <template slot-scope="scope">
              <template v-if="!scope.row.isEdit">{{ scope.row.endTime }}</template>
              <template v-else><el-input v-model="scope.row.endTime"></el-input></template>
              <template v-else><el-input v-model="scope.row.endTime" type="date" placeholder="选择日期"></el-input></template>
            </template>
          </el-table-column>
          <el-table-column label="所到国家或者地区" prop="destination" sortable width="300" align="center" >
@@ -733,7 +746,7 @@
      //个人信息数据
      individualList:[],
      isEditing: false,
      // fit:['fill'],
      fit:['cover'],
      // 个人经历数据
      experienceList: [],
      // isEdit:true,
@@ -1001,6 +1014,11 @@
        this.formDat[key] = '';
      });
    },
    handleUploadSuccess(response, file) {
      // 处理文件上传成功后的回调
      this.individualList.img = response.url;
    },

    //下拉
    handleChange(activeNames) {
      // console.log(val);
@@ -1409,6 +1427,7 @@
              this.btn=false
              this.isShow_2=false
              this.isShow=true
              this.isEditing = false
            });
          } else {
            this.$modal.msgSuccess("修改失败");
@@ -1419,6 +1438,50 @@
      // 刷新页面
      // window.location.reload();
    },
    uploadImage() {
      const inputElement = document.createElement("input");
      inputElement.type = "file";
      inputElement.accept = "image/*";
      inputElement.style.display = "none";
      document.body.appendChild(inputElement);

      inputElement.addEventListener("change", () => {
        const file = inputElement.files[0];
        if (file) {
          const formData = new FormData();
          formData.append("image", file);

          // 调用uploadPic接口上传图片
          axios.post("/common/upload", formData, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          }).then(response => {
            // 上传成功，获取新图片的URL
            const newImageUrl = response.data.img;

            // 假设individualList是一个对象，更新individualList.img
            this.individualList.img =   newImageUrl;

            // 假设fileList是一个数组，更新fileList中对应的图片URL
            // const index = this.fileList.findIndex(item => item.id === fileId);
            // this.fileList[index].url = newImageUrl;

            // 清除input元素并移除事件监听
            document.body.removeChild(inputElement);
            inputElement.removeEventListener("change", null);
          }).catch(error => {
            console.error("上传失败:", error);
            // 清除input元素并移除事件监听
            document.body.removeChild(inputElement);
            inputElement.removeEventListener("change", null);
          });
        }
      });

      // 触发点击事件，显示文件选择对话框
      inputElement.click();
    },
    //主要经历
    saveRowExperienceList(row) {
      this.$refs['elForm'].validate(valid => {