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

本文实例为大家分享了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 效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。