mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-18 07:16:44 +08:00
268 lines
8.1 KiB
Vue
268 lines
8.1 KiB
Vue
<template>
|
||
<div class="upload-file">
|
||
<!-- <el-upload
|
||
:action="uploadFileUrl"
|
||
:before-upload="handleBeforeUpload"
|
||
:file-list="fileList"
|
||
:limit="limit"
|
||
:multiple="limit>1"
|
||
:on-error="handleUploadError"
|
||
:on-exceed="handleExceed"
|
||
:on-success="handleUploadSuccess"
|
||
:show-file-list="showList"
|
||
:data="data"
|
||
:headers="headers"
|
||
class="upload-file-uploader"
|
||
ref="upload"
|
||
>
|
||
<el-button :icon="loading ? 'el-icon-upload2':''" :size="size" type="primary" :loading="isLoading">{{text}}</el-button>
|
||
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
||
请上传
|
||
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
||
的文件
|
||
</div>
|
||
</el-upload> -->
|
||
<el-upload
|
||
ref="myUpload"
|
||
class="upload-demo"
|
||
drag
|
||
:multiple="limit>1"
|
||
:action="uploadFileUrl"
|
||
:before-upload="handleBeforeUpload"
|
||
:on-success="handleUploadSuccess"
|
||
:show-file-list="showList"
|
||
:on-error="handleUploadError"
|
||
:on-exceed="handleExceed"
|
||
:on-remove="handleUploadRemove"
|
||
:data="data"
|
||
:headers="headers"
|
||
:limit="limit">
|
||
<svg-icon style="font-size:52px;margin-right:5px;margin-top:20px" icon-class="up-char"></svg-icon>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
<div class="el-upload__tip" slot="tip">支持拓展名：支持扩展名：<span v-for="ty in fileType">{{ty}} </span> <span v-if="limit > 1">图片支持批量上传，最多9张</span></div>
|
||
</el-upload>
|
||
|
||
<!-- 文件列表 -->
|
||
<!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
||
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
|
||
<el-link :href="file.url" :underline="false" target="_blank">
|
||
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
||
</el-link>
|
||
<div class="ele-upload-list__item-content-action">
|
||
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
|
||
</div>
|
||
</li>
|
||
</transition-group> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getToken } from "@/utils/token";
|
||
export default {
|
||
props: {
|
||
// 值
|
||
value: [String, Object, Array],
|
||
showList: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
url:{
|
||
type: String,
|
||
default: '/xboe/sys/xuploader/file/upload'
|
||
},
|
||
limit:{
|
||
type:Number,
|
||
default:1
|
||
},
|
||
dir:{
|
||
type:String,
|
||
default:'files'
|
||
},
|
||
text:{
|
||
type:String,
|
||
default:'选择文件并上传'
|
||
},
|
||
size:{
|
||
type:String,
|
||
default:'small'
|
||
},
|
||
// 大小限制(MB)
|
||
fileSize: {
|
||
type: Number,
|
||
default: 1024,
|
||
},
|
||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||
fileType: {
|
||
type: Array,
|
||
default: () => ["doc", "xls", "ppt","docx", "xlsx", "pptx","png","txt", "pdf","jpg","gif","bmp","mp4","mp3"],
|
||
},
|
||
// 是否显示提示
|
||
isShowTip: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
loading: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
isClear:{
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
uploadFileUrl: process.env.VUE_APP_BASE_API + this.url, // 上传的图片服务器地址
|
||
headers: {
|
||
'XBOE-Access-Token': getToken(),
|
||
},
|
||
isLoading:false,
|
||
fileList: [],
|
||
data:{
|
||
dir:this.dir
|
||
}
|
||
};
|
||
},
|
||
watch: {
|
||
isClear(val) {
|
||
if(!val) {
|
||
this.clearFiles();
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
// 是否显示提示
|
||
showTip() {
|
||
return this.isShowTip && (this.fileType || this.fileSize);
|
||
},
|
||
// 列表
|
||
list() {
|
||
let temp = 1;
|
||
if (this.value) {
|
||
// 首先将值转为数组
|
||
const list = Array.isArray(this.value) ? this.value : [this.value];
|
||
// 然后将数组转为对象数组
|
||
return list.map((item) => {
|
||
if (typeof item === "string") {
|
||
item = { name: item, url: item };
|
||
}
|
||
item.uid = item.uid || new Date().getTime() + temp++;
|
||
return item;
|
||
});
|
||
} else {
|
||
this.fileList = [];
|
||
return [];
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
clearFiles() {
|
||
this.$refs["myUpload"].clearFiles();
|
||
},
|
||
handleUploadRemove(file) {
|
||
this.$emit("remove",file);
|
||
},
|
||
// 上传前校检格式和大小
|
||
handleBeforeUpload(file) {
|
||
// 校检文件类型
|
||
if (this.fileType) {
|
||
let fileExtension = "";
|
||
if (file.name.lastIndexOf(".") > -1) {
|
||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||
}
|
||
const isTypeOk = this.fileType.some((type) => {
|
||
if (file.type.indexOf(type) > -1) return true;
|
||
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||
return false;
|
||
});
|
||
if (!isTypeOk) {
|
||
//this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
|
||
this.$message({message:`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`,type:'error',offset:100})
|
||
//this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
|
||
return false;
|
||
}
|
||
}
|
||
// 校检文件大小
|
||
if (this.fileSize) {
|
||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||
if (!isLt) {
|
||
this.$message({message:`上传文件大小不能超过 ${this.fileSize} MB!`,type:'error',offset:100})
|
||
//this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
||
return false;
|
||
}
|
||
}
|
||
if(this.loading) {
|
||
this.isLoading = true;
|
||
}
|
||
return true;
|
||
},
|
||
// 文件个数超出
|
||
handleExceed(res) {
|
||
this.$message({message:`只允许上传单个文件`,type:'error',offset:100});
|
||
},
|
||
// 上传失败
|
||
handleUploadError(err) {
|
||
this.isLoading = false;
|
||
this.$message({message:"上传失败, 请重试",type:'error',offset:100});
|
||
},
|
||
// 上传成功回调
|
||
handleUploadSuccess(res, file) {
|
||
if(res.status == 200) {
|
||
this.fileList = [];
|
||
this.isLoading = false;
|
||
this.$message({message:"上传成功",type:'success',offset:100});
|
||
} else {
|
||
this.isLoading = false;
|
||
this.fileList = [];
|
||
this.$message({message:"上传失败",type:'error',offset:100});
|
||
}
|
||
this.$emit("success", res);
|
||
},
|
||
// 删除文件
|
||
handleDelete(index) {
|
||
this.fileList.splice(index, 1);
|
||
this.$emit("remove", '');
|
||
},
|
||
// 获取文件名称
|
||
getFileName(name) {
|
||
if (name.lastIndexOf("/") > -1) {
|
||
return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
|
||
} else {
|
||
return "";
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.fileList = this.list;
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.el-upload__tip{
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
.upload-file-uploader {
|
||
margin-bottom: 5px;
|
||
}
|
||
.upload-file-list .el-upload-list__item {
|
||
border: 1px solid #e4e7ed;
|
||
line-height: 2;
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
|
||
}
|
||
.upload-file-list .ele-upload-list__item-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: inherit;
|
||
|
||
}
|
||
.ele-upload-list__item-content-action .el-link {
|
||
margin-right: 10px;
|
||
}
|
||
</style>
|
||
|