vue脚手架-上传图片 编辑修改图片（三）

需求，点击编辑图案的时候，需要弹出框，里面除了能修改图片信息之外，还得能够更换图片。
此篇文章主要讲述如何更换图片，，因为时更改单张图片的，所以特别想更换头像 有没有，因此我使用了element ui中的更换头像的插件来写的。

H5中更换图片的部分

        <el-upload
            :http-request="upLoad"
            :action="upload.action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="editForm.dialogImageUrl" //这里写个判断，如果没有更换图片 那么就是显示原来的啦
              :src="editForm.dialogImageUrl"
              class="dialogPic"
            >
        </el-upload>

data里面

editForm: {
        dialogImageUrl: '',  //这个显示图片的地址，是在on-success中获得的，如何获得 element 中有说
        picName: '',
        picLink: '',
        editbanner: '',
        imageFile: '' //这个更换图片后 那个图片的文件
      },

methods中

  // 更换照片-上传头像
    async upLoad (file) {
      // 把新的图片文件存到editForm中
      this.editForm.imageFile = file.file
    },
    // 更换照片-上传成功后
    handleAvatarSuccess (res, file) {
      this.editForm.dialogImageUrl = URL.createObjectURL(file.raw)
    },