环境: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组件
<template>
<el-dialog :title="title" :visible.sync="upLoadVisible" width="30%" @close="closeDialog">
<div class="upload-box">
<el-upload
ref="upload"
drag
class="upload-demo"
accept=".xls,.xlsx"
action="#"
:limit="1"
:on-preview="handlePreview"
:on-remove="