vue+elementui上传头像

vue页面中：

<el-form :model="form">
    <el-form-item label="路径" prop="url">
        <el-upload
          class="avatar-uploader"
          action=""
          :http-request="field101BeforeUpload"
          :show-file-list="false"
         >
           <img v-if="imageUrl" :src="imageUrl" class="avatar" />
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
     </el-form-item>
</el-form>

data() {
    return {
       imageUrl: "",
        form:{},
    };
  },

 methods: {
   //上传图片
    field101BeforeUpload(file) {
      var formData = new FormData();
      formData.append("file", file.file);
      //注意：如果接口还需要传其他参数的话，同样使用formData.append("参数2", 参数值,);
      //请求上传接口 pic()
      pic(formData).then((res) => {
        this.imageUrl = res.msg;
      });
    },
    
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.fileList = [];
      const id = row.id || this.ids;
      getXssUpload(id).then((response) => {
        this.form = response.data;
   		//注意
        this.imageUrl = this.form.url
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            //注意提交时要把图片地址赋过来
            this.form.url = this.imageUrl;
            //修改保存
            updateXssUpload(this.form).then((response) => {
            });
          } else {
            //注意提交时要图片把地址赋过来
            this.form.url = this.imageUrl;
            //添加保存接口
            addXssUpload(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
            });
          }
        }
      });
    },
  },
  },

<style scoped>
    .avatar-uploader {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 178px;
      height: 178px;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>