Vue+elementUI项目实现自定义上传图片并在页面显示，通过点击按钮后发送给后端

最后实现的效果：后端要求数据格式是json，图片和回复内容一起传至接口
数据格式是json，图片不能以formData形式接后端，就考虑到将图片转为base64格式！

上传照片后显示，并隐藏上传按钮

html部分：

<div class="upload-img-div">
            <el-upload class="feedbackUpload-img" accept=".png,.jpg,.jpeg"
                       :style="{backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"
                       action="aaa" :limit="1" :before-upload="beforeUpload" :on-change="handlePictureCardPreview"
                       :show-file-list="false" list-type="picture">
              <i v-show="!dialogImageUrl" class="el-icon-upload avatar-uploader-icon"></i>
              <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上传照片</div>
            </el-upload>
            <i v-show="dialogImageUrl" class="el-icon-delete delUploadImg" @click="delUploadImg"></i>
          </div>

• accept属性控制上传类型
• style属性控制上传后显示图片
• action是element要求必不可少的，后面字符随便写
• limit限制上传数量
• before-upload 上传前的勾子
• on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
• :show-file-list 是否显示已上传文件列表，这里设为false，否则会显示！
• list-type 文件列表的类型 这里设为picture，否则会不显示上传的图片（不知道原因）

后面几条判断是否上传，显示不同状态

data数据：

data() {
      return {
        dialogImageUrl: '',//上传图片后的图片地址
        uploadImgBase64: '',//存储将图片转化为base64后的字符
      };
    },

js部分：
图片转base64方法来源：图片转base64

// 文件改变时勾子函数
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
      },
      // 上传前勾子函数
      beforeUpload(file) {
        this.toBase64(file);
        return false;//取消自动上传
      },
      handleAddFeedback() {
        let self = this;
        if (!self.addFeedbackInfo) {
          this.$message({
            message: '反馈消息不能为空',
            type: 'warning'
          });
        } else {
          let addFeedbackForm = {};
          addFeedbackForm.StudentInf = self.addFeedbackInfo;
          addFeedbackForm.StudentImg = self.uploadImgBase64;
          self.$http.post('feed_back_add', addFeedbackForm)
            .then((res) => {
              ......
            })
            .catch(() => {
              this.$message({
                message: '出错了，请稍后再试',
                type: 'error'
              });
            });
        }
      },
      // 删除已上传图片
      delUploadImg() {
        this.dialogImageUrl = '';
        this.uploadImgBase64 = '';
      },
      // 将图片转为base64（这个方法是网上找的）
      toBase64(file) {
        const self = this;
        let reader = new FileReader();
        reader.onloadend = function () {
          self.uploadImgBase64 = reader.result;
        };
        if (file) {
          reader.readAsDataURL(file);
        }
      },

style样式：

/*上传照片样式*/
  .upload-img-div {
    width: 130px;
    height: 130px;
    position: relative;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    text-align: center;
  }

  .addFeedbackUpload-img {
    overflow: hidden;
    width: 130px;
    height: 130px;
  }

  .addFeedbackUpload-img:hover {
    border-color: #C80505;
    color: #C80505;
  }

  .addFeedbackUpload-img .avatar-uploader-icon {
    text-align: center;
    z-index: 100;
    font-size: 50px;
    color: #8c939d;
    width: 130px;
    line-height: 80px;
    height: 100px;
  }

  .addFeedbackUpload-img:hover .avatar-uploader-icon {
    color: #C80505;
  }

  .addFeedbackUpload-img .upload__tip {
    font-size: 12px;
    text-align: center;
    z-index: 10;
  }

  /*上传照片的删除*/
  .delUploadImg {
    border-radius: 50%;
    position: absolute;
    top: -10px;
    font-size: 20px;
    right: -10px;
    z-index: 999;
    color: #8c939d;
  }

  .delUploadImg:hover {
    color: #C80505;
  }

最后请求体的数据就是这样：

本人菜鸟，有很多地方写的不好～