使用Element的el-upload上传图片

参考文档

官网：https://element.eleme.cn/#/zh-CN/component/upload

参考代码

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :headers="headerObj"
  :show-file-list="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>

解释

1.action是上传图片的地址，当选择图片后会直接按照这个地址发送请求。如果要加上统一token验证，需要增加header属性。

          headerObj: {
            Authorization:'Bearer '+window.sessionStorage.getItem("token"),
          },

2.on-success是请求成功后的方法

      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },

在案例中，返回后对imageUrl的值进行设定，能够在页面中显示上传成功的图片。 3.before-upload是上传图片前的方法，可以用来校验

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }