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

更新時間：2022年08月15日 10:22:27 作者：cwxblog

這篇文章主要為大家詳細介紹了vue中element-ui使用axios上傳文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue中element-ui使用axios上傳文件的具體代碼，供大家參考，具體內(nèi)容如下

環(huán)境：vue2.5.6+axios0.18.1+element-ui2.15.1

在使用element UI的upload組件上傳文件時，遇到一些問題，網(wǎng)上的說法不盡如是，在此記錄

其實最主要的估計就是axios相關(guān)的問題，因我們平時開發(fā)的vue項目都是封裝過axios后進行api的調(diào)用，但上傳操作跟一般的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="handleRemove"
? ? ? ? :file-list="fileList"
? ? ? ? :auto-upload="false"
? ? ? ? :before-upload="beforeUpload"
? ? ? ? :http-request="uploadHttpRequest"
? ? ? >
? ? ? ? <i class="el-icon-upload" />
? ? ? ? <div class="el-upload__text">
? ? ? ? ? 將文件拖到此處，或<em style="color: #409eff">點擊上傳</em>
? ? ? ? </div>
?
? ? ? ? <div slot="tip" class="el-upload__tip">
? ? ? ? ? 只能上傳xls/xlxs文件, 文件大小不超過10M
? ? ? ? </div>
? ? ? </el-upload>
? ? ? <el-progress
? ? ? ? v-if="processVisible"
? ? ? ? :percentage="processPercent"
? ? ? ? :text-inside="true"
? ? ? ? :stroke-width="24"
? ? ? ? :status="processStatus"
? ? ? ? style="margin: 20px 0;"
? ? ? />
? ? ? <el-alert
? ? ? ? v-if="tipVisible"
? ? ? ? :title="tipTitle"
? ? ? ? type="error"
? ? ? ? @close="tipVisible = false"
? ? ? />
? ? ? <el-button
? ? ? ? style="margin: 10px 0;"
? ? ? ? icon="el-icon-upload2"
? ? ? ? size="small"
? ? ? ? type="primary"
? ? ? ? :loading="uploading"
? ? ? ? @click="submitUpload"
? ? ? >
? ? ? ? 上傳到服務(wù)器
? ? ? </el-button>
? ? ? <el-button
? ? ? ? style="margin-left: 0"
? ? ? ? icon="el-icon-circle-close"
? ? ? ? size="small"
? ? ? ? @click="cancelUpload"
? ? ? >
? ? ? ? 取 消
? ? ? </el-button>
? ? </div>
? </el-dialog>
</template>
?
<script>
export default {
? props: {
? ? title: {
? ? ? type: String,
? ? ? default: "上傳文件"
? ? },
? ? upLoadVisible: {
? ? ? type: Boolean,
? ? ? default: false
? ? },
? ? uploadUrl: { // 上傳文件的api
? ? ? type: String,
? ? ? default: ""
? ? }
? },
? data() {
? ? return {
? ? ? fileList: [],
? ? ? uploading: false,
? ? ? processPercent: 5,
? ? ? processStatus: 'success',
? ? ? processVisible: false,
? ? ? tipVisible: false,
? ? ? tipTitle: '',
? ? ? timer: null
? ? };
? },
? methods: {
? ? // 上傳文件之前的鉤子：判斷上傳文件格式、大小等，若返回false則停止上傳
? ? beforeUpload(file) {
? ? ? // 文件類型
? ? ? const isType = file.type === "application/vnd.ms-excel";
? ? ? const isTypeComputer =
? ? ? ? file.type ===
? ? ? ? "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
? ? ? const fileType = isType || isTypeComputer;
? ? ? if (!fileType) {
? ? ? ? this.$message.error("上傳文件只能是xls/xlsx格式！");
? ? ? }
?
? ? ? // 文件大小限制為10M
? ? ? const fileLimit = file.size / 1024 / 1024 < 10;
? ? ? if (!fileLimit) {
? ? ? ? this.$message.error("上傳文件大小不超過10M！");
? ? ? }
? ? ? return fileType && fileLimit;
? ? },
? ? // 自定義上傳方法，param是默認參數(shù)，可以取得file文件信息，具體信息如下圖
? ? async uploadHttpRequest(param) {
? ? ? const that = this;
? ? ? this.uploading = true; // 顯示按鈕加載中
? ? ? this.processVisible = true; // 顯示進度條
? ? ? this.processPlus();
? ? ? // FormData對象，添加參數(shù)只能通過append('key', value)的形式添加
? ? ? const formData = new FormData();
? ? ? // 添加文件對象
? ? ? formData.append("file", param.file);
?
? ? ? const config = {
? ? ? ? headers: {
? ? ? ? ? "Content-Type": "multipart/form-data"
? ? ? ? }
? ? ? };
? ? ? this.axiosUpload.post(this.uploadUrl, formData, config).then(res => {
? ? ? ? // 這里的res需根據(jù)后臺返回情況判斷
? ? ? ? if (res.data.code === 200) {
? ? ? ? ? this.processPercent = 100;
? ? ? ? ? that.uploading = false;
? ? ? ? ? this.processVisible = false;
? ? ? ? ? this.timer = null;
? ? ? ? ? that.$emit("closeUpload");
? ? ? ? ? that.$message.success(res.data.msg);
? ? ? ? } else {
? ? ? ? ? this.processPercent = 100;
? ? ? ? ? this.processStatus = "exception";
? ? ? ? ? this.tipVisible = true;
? ? ? ? ? this.tipTitle = res.data.msg;
? ? ? ? ? this.uploading = false;
? ? ? ? }
? ? ? }).catch(reject => {
? ? ? ? console.log(reject)
? ? ? })
? ? },
? ? // 上傳至服務(wù)器
? ? submitUpload() {
? ? ? this.$refs.upload.submit();
? ? },
? ? handleRemove(file, fileList) {
? ? ? console.log(file, fileList);
? ? },
? ? handlePreview(file) {
? ? ? console.log(file);
? ? },
? ? cancelUpload() {
? ? ? this.$refs.upload.clearFiles(); // 清除上傳文件對象
? ? ? this.fileList = []; // 清空選擇的文件列表
? ? ? this.$emit("closeUpload");
? ? },
? ? // 前期進度條增加
? ? processPlus() {
? ? ? this.timer = setInterval(() => {
? ? ? ? if (this.processPercent < 90) {
? ? ? ? ? this.processPercent += 10;
? ? ? ? }
? ? ? }, 200)
? ? },
? ? closeDialog() {
? ? ? this.$emit('closeUploadDialog');
? ? }
? }
};
</script>
?
<style scoped>
.upload-box {
? display: flex;
? flex-direction: column;
? justify-content: center;
}
.upload-demo {
? display: flex;
? flex-direction: column;
? align-items: center;
}
</style>

3 效果