vue多图上传后,点编辑按钮查看详情时,页面加载时,图片会先向右偏移,后回到正常位置,找了很久都找不到,有哪位大佬能指点一下吗?

1、点编辑回显后,因为不给展示图片的fileList赋空的话,**再次点击编辑**图片会一直追加,因此为此查询之前先置空就会出现所描述的现象;

上图

图片说明

图片说明

代码如下

<el-form-item label="展示banner" prop="projectName">
                <el-upload
                  action="#"
                  ref="upload"
                  list-type="picture-card"
                  :on-remove="handleRemove"
                  :http-request="uploadAvatar"
                  :on-change="maxUploadNum"
                  :class="{hide:hideUpload}"
                  :before-upload="beforeAvatarUpload"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                  :limit="5"
                  multiple
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <!--<img v-for="item in picList" :src="item" alt="" />-->
                <div>注:最多上传五张</div>
              </el-form-item>
 data() {
        return {
          hideUpload: false,
          picList: [],
          fileList:[],
          },
        }
      },
 uploadAvatar(item) {
          var vm = this
          const formData = new FormData()
          formData.append('file', item.file)
          const uid = item.file.uid
          vm.axios({
            method: 'post',
            url: '/uploadFile',
            data:formData
          }).then(function(res) {
            vm.picList.push({ key: uid, value: res.data.data.url })
            vm.emptyUpload()
          }).catch(() => {
            vm.$message.error('上传失败,请重新上传')
            vm.emptyUpload()
          })
        },

        /**
         * 清空上传组件
         */
        emptyUpload() {
          const mainImg = this.$refs.upload
          if (mainImg) {
            if (mainImg.length) {
              mainImg.forEach(item => {
                item.clearFiles()
              })
            } else {
              this.$refs.upload.clearFiles()
            }
          }
        },
                 handleRemove(file, fileList) {
          for (const i in this.picList) {
            if (this.picList[i].key === file.uid) {
              this.picList.splice(i, 1)
            }
          }
          if (this.fileList.length >= 5) {
            this.hideUpload = true
          } else {
            this.hideUpload = false
          }
        },
        //上传最大的图片个数
        maxUploadNum(file, fileList) {
          console.log(1,fileList.length)
         if(fileList.length>=5){
           this.hideUpload = true
         }else {
           this.hideUpload = false
         }
        },
        handleExceed() {
          this.$message.warning(`最多上传5个图片`);
        },
        // 上传图片之前的操作
        beforeAvatarUpload(file) {
          var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
          const extension =
              testmsg === 'jpg' ||
              testmsg === 'JPG' ||
              testmsg === 'png' ||
              testmsg === 'PNG'
          if (!extension) {
            this.$message({
              message: '上传图片只能是jpg / png格式!',
              type: 'error'
            })
            return false // 必须加上return false; 才能阻止
          }
          const isLt1M = file.size / 1024 / 1024 < 1
          if (!isLt1M) {
            this.$message.error('上传头像图片大小不能超过 1MB!')
            return false
          }
          return extension || isLt1M
        },
        editProject(projectId) {
          this.activeName = '1'
          this.projectInfo.projectId = projectId
          this.getProjectByProjectId(projectId)
          this.editdialogVisible = true
          // this.resetTemp()
        },

                 // 获取项目信息
        getProjectByProjectId(projectId) {
          var vm = this
          vm.picList=[]
          vm.fileList=[]
          vm.emptyUpload()
          this.axios({
            method: 'GET',
            url: '/project/getProject?projectId=' + projectId
          }
          ).then(function(res) {
            console.log(res.data.data)
            res.data.data.userList=[]
            vm.projectInfo = res.data.data
            var title = []
            var projectTitleString = vm.projectInfo.projectTitle
            var bannerImageString = vm.projectInfo.bannerImage
            if(projectTitleString !== null){
              projectTitleString.split(',').forEach(function(item) {
                title.push({ value: item })
              })
              vm.projectInfo.projectTitle = title
            }else {
              title.push({ value: "" })
              vm.projectInfo.projectTitle = title
            }
            vm.projectInfo.entryMode += ''
            if (bannerImageString !== null) {
              bannerImageString.split(',').forEach(function(item) {
                fileList.push({ name: 'name', url: item })
              })
            }
            if (vm.fileList.length >= 5) {
              vm.hideUpload = true
            } else {
              vm.hideUpload = false
            }
          })
        },

这句没报错么

fileList.push({ name: 'name', url: item })

https://segmentfault.com/q/1010000015229425