vue-upload-component 如何使用自己封状的axios提交

要使用自己封装的axios提交，你需要在Vue组件中引入axios，并将axios传递给vue-upload-component的upload方法的第二个参数，示例代码如下：

<template>
  <div>
    <vue-upload-component
      ref="upload"
      :action="uploadUrl"
      :headers="uploadHeaders"
      :data="uploadData"
      :multiple="false"
      :accept="'image/*'"
      @input-filter="inputFilter"
      @start="handleStart"
      @progress="handleProgress"
      @success="handleSuccess"
      @error="handleError"
      @abort="handleAbort"
    ></vue-upload-component>
  </div>
</template>

<script>
import axios from 'axios'
import VueUploadComponent from 'vue-upload-component'

export default {
  components: {
    VueUploadComponent
  },
  data() {
    return {
      uploadUrl: 'your-upload-url',
      uploadHeaders: {
        Authorization: 'Bearer ' + localStorage.getItem('token')
      },
      uploadData: {}
    }
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      // your input filter logic
    },
    handleStart() {
      // handle start event
    },
    handleProgress(event, file, progress) {
      // handle progress event
    },
    handleSuccess(response, file) {
      // handle success event
    },
    handleError(response, file) {
      // handle error event
    },
    handleAbort(file) {
      // handle abort event
    },
    upload(file) {
      this.$refs.upload.upload(file, {
        http: axios, // pass your axios instance here
        headers: this.uploadHeaders,
        data: this.uploadData
      })
    }
  }
}
</script>

在upload方法中，我们通过this.$refs.upload.upload(file, options)调用vue-upload-component的upload方法，并将自己封装的axios实例作为options对象的http属性传递给vue-upload-component。这样vue-upload-component就会使用我们自己封装的axios实例进行文件上传了。