elementui 手动上传头像

使用elementui 照片墙,只显示一张图片,给后端传二进制格式,点击 upload 手动上传:
效果如图所示:

<el-dialog title="Avatar" :visible.sync="dialogVisible">
          <el-upload
            ref="uploadPic"
            action="/api/upload"
            list-type="picture-card"
            :class="{ disabled: uploadDisabled }"
            :limit="1"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :headers="getupload()"
            :show-file-list="true"
            :auto-upload="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="uploadPicture" type="primary" :loading="isUploadPic">Upload</el-button>
            <!-- <el-button @click="refresh_info" type="primary" >Confirm</el-button> -->
          </div>
        </el-dialog>

      isUploadPic: false,
      uploadDisabled: false,
      dialogVisible: false,

    getupload() {
     
      return {
      Authorization: "JWT " + getToken("token") };
    },
    //点击 按钮 弹窗上传
    handleForUpload() {
     
      this.dialogVisible = true;
    },
    //点击 upload btn 开始 上传
    uploadPicture() {
     
      // 将上传的文件附件转成二进制转给后台 this.form就是表单输入框的内容
      const formData = new FormData();
      formData.append("file", this.file);
      this.isUploadPic = true;
      uploadOrganizationAvatar(formData).then(async (res) => {
     
        this.refresh_info();
        this.dialogVisible = false;
        this.isUploadPic = false;
      });
    },
    handleChange(file, fileList) {
     
      this.file = file.raw;
      this.fileName = file.name;
      if (fileList.length >= 1) {
     
        this.uploadDisabled = true;
      }
    },
    handleRemove(file) {
     
      //imgDelete.post({pic_name : file.response.pic_name}).then();
      this.uploadDisabled = false;
    },
    handleAvatarSuccess(res, file) {
     
      this.$refs.uploadPic.clearFiles();
      this.imageUrl = res.data;
    },
    beforeAvatarUpload(file) {
     
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
     
        this.$message.error("File type only support JPG, PNG!");
      }
      if (!isLt2M) {
     
        this.$message.error("File size must lower than 2MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },

.disabled .el-upload--picture-card {
     
  display: none !important;
}