vue中element-ui 使用axios上传文件 组件

环境：vue2.5.6+axios0.18.1+element-ui2.15.1

在使用element UI的upload组件上传文件时，遇到一些问题，网上的说法不尽如是，在此记录

其实最主要的估计就是axios相关的问题，因我们平时开发的vue项目都是封装过axios后进行api的调用，但上传操作跟一般的api请求不同，所有总是报错，故需要建立新的axios实例。

文件上传类型可以在el-upload的accept中进行定义，上传时会进行一定的过滤。

例如图片类型：accept=".png, .jpeg"

1. 封装上传文件的axios实例

import Vue from "vue";
import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:8080", // 后台地址
  withCredentials: false,
  timeout: 10000
});
Vue.prototype.axiosUpload = instance;

2. 封装vue组件

3 效果