记录一下element-ui 自定义上传图片的问题

这个问题困扰了我好久，感谢后端的同事大佬指点，终于调用接口成功了

先上代码

<el-upload class="avatar-uploader"
                       ref="uploadToux" //绑定ref
                       action //由于使用自定义的上传，所以这里不填也是可以的
                       accept=".jpg,.jpeg,.png,.bmp" //限制文件
                       :auto-upload="false" //自动上传，设置关闭
                       :limit="1"//最大上传数
                       :show-file-list="false"//是否显示上传列表，由于只上传一张图，就不显示了
                       :before-upload="beforeAvatarUpload"//上传前的检验，检验不通过则不会上传
                       :http-request="httpRequestTouXiang"//自定义上传
                       :on-change="upPloadTx" //在图片改变后，调用函数上传>
              <img v-if="imageUrl"
                   :src="imageUrl"
                   class="avatar">
              <i v-else
                 class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

接下来是非常重要的js内容

// 上传前的钩子
    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
    },
    // 头像自定义上传
    async httpRequestTouXiang(param) {
    //传参进来，同时定义一个formdata对象
      const formData = new FormData()
      //   console.log(param.file)
      //通过 append 函数往formdata对象里传参，这里传的是后端需求的接口信息
      
      formData.append('fname', 'headfile')
      formData.append('headfile', param.file)
      //发送ajax请求，这里用的是axios  formData内容里大概是
      //{
      //fname:headfile
      //headfile:param.file(图片对象)
      //}
      const { data: res } = await this.$http.post(
        'api/vranchor/fileuploads',
        formData
      )
      console.log(res)
     // this.adminData.imageUrl = res.data 
      this.imageUrl = '***********' + res.data
    },
    // 图片改变的钩子
    upPloadTx() {
      //   console.log(this.$refs.uploadToux)
      this.$refs.uploadToux.submit()
    },

这样就算成功了