elementui-upload自定义上传方式上传到服务器返回url:http

1-先封装一个uploadImage.vue组件
<template>
     <div class="photo">
        <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :http-request="handleUpload">
            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
            <img v-if="value" :src="value" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>
<script lang="ts">
// v-model 的本质 还是父子组件通信
// 1.他会给子组件传递一个名字叫做 value 的数据
// 2.默认监听input 事件修改绑定的数据
import Vue from 'vue'
import { uploadImage } from '@/services/user'
export default Vue.extend({
  props: {
    value: String
  },
  data () {
    return {
      imageUrl: ''
    }
  },
  methods: {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    handleAvatarSuccess (res: any, file: any) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    beforeAvatarUpload (file: any) {
      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
    },
    // 自定义上传方式 handleUpload
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    async handleUpload (options: any) {
      console.log(options, 'options')
      const fd = new FormData()
      fd.append('image', options.file) // file名称是后端接口传递的参数 名称file 默认也是file
      const res = await uploadImage(fd)
      console.log(res)

      // 上传给父组件
      this.$emit('input', res.data.data.url)
    }
  }
})
</script>
<style lang="scss" scoped>
 ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

2-在父组件中引入 upload组件
/* eslint-disable @typescript-eslint/no-explicit-any */
<template>
  <div class="course">
    <CourseImage v-model="imageUrl"></CourseImage>
  </div>
</template>

<script lang="ts">

import Vue from 'vue'
import CourseImage from './components/CourseImage.vue'
export default Vue.extend({
  name: 'Course',
  components: {
    CourseImage
  },
  data () {
    return {
      imageUrl: '',
      course: {
        courseListImg: null
      }
    }
  }

})
</script>

<style lang="scss" scoped>

</style>