vue+elementui上传头像

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);
      //请求上传接口 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("新增成功");
            });
          }
        }
      });
    },
  },
  },