vue自定义上传组件

<AppUpload @on-success=" (url) => { formdata.baseImageUrl = url; }">
  <Button>上传图片</Button>
</AppUpload>

<template>
  <div>
    <div class="app-upload-btn" @click="open">
      <slot></slot>
    </div>

    <input
      v-show="false"
      :multiple="multiple"
      :accept="accept"
      ref="upload_el"
      type="file"
      @change="clooseFile"
    />
  </div>
</template>

<script>
import { RequestUpload } from 'xxx'
export default {
  data () {
    return {
      multiple: false, // 是否允许多文件
      accept: 'image/png,image/jpg', // 可选择的文件类型

      fileName: 'file', // 文件参数名
      // 其他额外的参数
      otherParams: {
        dir: 'test'
      },

      // 文件类型校验正则表达式
      patt: /.jpg|.jpeg|.png/i
    }
  },

  methods: {
    open () {
      this.$refs['upload_el'].click()
    },

    // 选择文件
    clooseFile (e) {
      // console.log(e)
      let files = e.target.files

      for (let i = 0; i < files.length; i++) {
        // 文件格式校验
        if (!files[i].type.match(this.patt)) {
          console.log('文件格式错误')
          this.$toast.fail('文件格式错误')
          continue
        }

        let formData = new FormData() // formData对象
        formData.append(this.fileName, files[i]) // 添加Fail类型的图片信息的参数
        for (const key in this.otherParams) {
          // 加入额外的参数
          formData.append(key, this.otherParams[key])
        }
        this.submit(formData) // 上传
      }
    },

    // 提交数据
    submit (formData) {
      console.log('正在上传')

      // 调用上传文件接口
      RequestUpload(formData).then(res => {
        if (res.code !== 0) {
          console.log('上传失败')
          return
        }

        console.log('上传成功')
        this.$emit('on-success', res.content.url)
      })
    }
  }
}
</script>
<style scoped>
.app-upload-btn {
  cursor: pointer;
}
</style>