<template>
? <!-- 導(dǎo)入外部按鈕 -->
? <el-button style="color: #fff;position: relative;" type="primary">
? ? <el-upload
? ? style="color: #fff;height: 38px;width: 70px;line-height: 38px;"
? ? class="upload-btn"
? ? :action="uploadPath"
? ? :headers="uploadHeader"
? ? accept=".xls, .xlsx"
? ? :show-file-list="false"
? ? :http-request="handleAvatarSuccess">導(dǎo)入</el-upload>
? </el-button>
</template>
<script>
import axios from "axios";
export default {
? name: "fileUpload",
? props: {
? ? // 導(dǎo)入路徑坪蚁，由父組件傳遞
? ? uploadUrl: {
? ? ? type: String,
? ? ? default: process.env.VUE_APP_BASE_API
? ? }
? },
? data() {
? ? return {
? ? ? uploadPath: "", // 組件內(nèi)接收導(dǎo)入路徑的值
? ? ? uploadHeader: {
? ? ? ? // 導(dǎo)入時(shí)請(qǐng)求的請(qǐng)求頭
? ? ? ? Authorization: localStorage.getItem("toKenValue") || ""
? ? ? }
? ? };
? },
? created() {
? ? this.uploadPath = this.uploadUrl;
? },
? methods: {
? ? handleAvatarSuccess(response) {
? ? ? // 傳輸文件
? ? ? let formData = new FormData();
? ? ? formData.append("file", response.file);
? ? ? axios({
? ? ? ? url: this.uploadPath,
? ? ? ? method: "post",
? ? ? ? headers: this.uploadHeader,
? ? ? ? data: formData,
? ? ? ? responseType: "blob" // 必須設(shè)置虚缎，不然拿不到后端給的blob對(duì)象
? ? ? })
? ? ? ? .then(res => {
? ? ? ? ? if (res.data.type === "application/json") {
? ? ? ? ? ? /**
? ? ? ? ? ? * responseType: "blob" 會(huì)將請(qǐng)求回來的數(shù)據(jù)轉(zhuǎn)換成blob對(duì)象
? ? ? ? ? ? * blob對(duì)象的text方法可得到原始數(shù)據(jù)
? ? ? ? ? ? */
? ? ? ? ? ? res.data.text().then(value => {
? ? ? ? ? ? ? var { code } = JSON.parse(value);
? ? ? ? ? ? ? if (code === 200) {
? ? ? ? ? ? ? ? // 成功
? ? ? ? ? ? ? ? this.$emit("handleAvatarSuccess", "success");
? ? ? ? ? ? ? } else if (code !== 200 && code) {
? ? ? ? ? ? ? ? // 失敗
? ? ? ? ? ? ? ? this.$emit("handleAvatarSuccess", "fail");
? ? ? ? ? ? ? }
? ? ? ? ? ? ? this.$Notification({
? ? ? ? ? ? ? ? title: "提示",
? ? ? ? ? ? ? ? message: code === 200 ? "導(dǎo)入成功" : "導(dǎo)入失敗",
? ? ? ? ? ? ? ? duration: 2500
? ? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ? ? ? // 當(dāng)后端返回文件流的時(shí)候
? ? ? ? ? } else {
? ? ? ? ? ? var fileNameStr = res.headers["content-disposition"];
? ? ? ? ? ? var fileName = decodeURIComponent(
? ? ? ? ? ? ? fileNameStr.slice(fileNameStr.indexOf("%"))
? ? ? ? ? ? ); // 截取后端設(shè)置的文件名并轉(zhuǎn)碼
? ? ? ? ? ? let url = window.URL.createObjectURL(res.data); // 拿到blob對(duì)象創(chuàng)建一個(gè)url地址
? ? ? ? ? ? let link = document.createElement("a");
? ? ? ? ? ? link.style.display = "none";
? ? ? ? ? ? link.href = url;
? ? ? ? ? ? link.download = fileName; // 設(shè)置下載的文件名
? ? ? ? ? ? document.body.appendChild(link);
? ? ? ? ? ? link.click();
? ? ? ? ? ? window.URL.revokeObjectURL(url); // 釋放創(chuàng)建的url,防止內(nèi)存污染愉棱，當(dāng)瀏覽器關(guān)閉時(shí)也會(huì)清理創(chuàng)建的url
? ? ? ? ? ? this.$Notification({
? ? ? ? ? ? ? title: "提示",
? ? ? ? ? ? ? message: "導(dǎo)入失敗",
? ? ? ? ? ? ? duration: 2500
? ? ? ? ? ? });
? ? ? ? ? }
? ? ? ? })
? ? ? ? .catch(err => {
? ? ? ? ? console.log("err", err);
? ? ? ? });
? ? }
? }
};
</script>
<style lang="stylus" scoped>
>>>.el-upload:focus {
? border-color: #409EFF;
? color: #fff;
}
.el-button {
? padding: 0;
? height: 38px;
}
</style>
