vue element ui 上传 请求接口

在页面上

http-request: 覆盖默认的上传行为，可以自定义上传的实现

<el-upload
  class="avatar-uploader"
  action=""
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :http-request="requests">
  <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

方法中：

// 上传图片

      handleAvatarSuccess(res, file) {

        this.ruleForm.imageUrl = res.msg;

        this.$forceUpdate()

      },

新写请求:

requests(file){

        let that = this

        let isJPG = ['image/jpeg', 'image/png', 'image/jpg'];

        const isImg =isJPG.includes(file.file.type)

        const isLt2M = file.file.size / 1024 / 1024 < 1;

        if (!isImg) {

          this.$message.error('请上传正确的LOGO格式!');

          return false

        }

        if (!isLt2M) {

          this.$message.error('上传LOGO大小不能超过 1MB!');

          return false

        }

        let fd = new FormData();

        fd.append('file', file.file);//传文件

        let loading = this.$loading()

　　//下面是接口请求

        tenantUpload(fd).then(res => {

          that.ruleForm.imageUrl = res.data.msg;

          that.$forceUpdate()

        }, this.err).finally(() => loading.close())

      },