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

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

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

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！