109 lines
3.1 KiB
Vue
109 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-form-item :label="label" required>
|
||
|
|
<input :id="id" type="file" name="file" v-if="isShowUploadFile"
|
||
|
|
style="border: 1px solid #d8dce5;border-radius: 4px;padding: 5px 10px; width: 80%">
|
||
|
|
<el-button type="primary" v-if="isShowUploadFile" @click="submitUpload(file)">上传</el-button>
|
||
|
|
<el-progress :percentage="file.progress" v-if="!isShowUploadFile"></el-progress>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import uploadFile from 'utils/uploadFile';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
fileType: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
id: {
|
||
|
|
type: String,
|
||
|
|
default: 'btnFileUpload'
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
type: String,
|
||
|
|
default: '文件上传：'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
file: null,
|
||
|
|
isShowUploadFile: true,
|
||
|
|
uploadSuccess: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
const self = this;
|
||
|
|
document.getElementById(this.id).addEventListener('change', function (event) {
|
||
|
|
const files = event.target.files;
|
||
|
|
const file = files[0];
|
||
|
|
if (/[\u4e00-\u9fa5\s]/.test(file.name)) {
|
||
|
|
self.$message({
|
||
|
|
message: '文件名不允许存在中文和空格',
|
||
|
|
type: 'error'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (file.name.length > 64) {
|
||
|
|
self.$message({
|
||
|
|
message: '文件名称过长',
|
||
|
|
type: 'error'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
self.file = {
|
||
|
|
file: file,
|
||
|
|
name: file.name,
|
||
|
|
isUploading: false,
|
||
|
|
isCancel: false,
|
||
|
|
isReady: false,
|
||
|
|
isSuccess: false,
|
||
|
|
progress: 0
|
||
|
|
};
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
submitUpload (file) {
|
||
|
|
if (file == undefined || file == null) {
|
||
|
|
return this.$message.error('请选择上传文件');
|
||
|
|
}
|
||
|
|
if (/[\u4e00-\u9fa5\s]/.test(file.name)) {
|
||
|
|
return this.$message.error('文件名不允许存在中文和空格');
|
||
|
|
}
|
||
|
|
if (this.fileType == 'EXCEL') {
|
||
|
|
const fileName = file.name.split('.');
|
||
|
|
let flag
|
||
|
|
if (fileName[fileName.length - 1] === 'xlsx' ||
|
||
|
|
fileName[fileName.length - 1] === 'xls' ||
|
||
|
|
fileName[fileName.length - 1] === 'xltx' ||
|
||
|
|
fileName[fileName.length - 1] === 'xlt' ||
|
||
|
|
fileName[fileName.length - 1] === 'xlsm' ||
|
||
|
|
fileName[fileName.length - 1] === 'xlsb' ||
|
||
|
|
fileName[fileName.length - 1] === 'xltm' ||
|
||
|
|
fileName[fileName.length - 1] === 'csv'
|
||
|
|
) {
|
||
|
|
flag = true
|
||
|
|
} else {
|
||
|
|
return this.$message.error('请上传EXCEL表格');
|
||
|
|
}
|
||
|
|
} else if (this.fileType == 'TXT') {
|
||
|
|
const fileName = file.name.split('.')
|
||
|
|
if (['xlsx', 'xls', 'csv', 'png', 'jpg', 'jpeg', 'gif', 'exe', 'sys', 'mp4', 'avi', 'wmv', 'pdf', 'md'].includes(fileName[fileName.length - 1])) return this.$message.error('请上传文本类文件')
|
||
|
|
}
|
||
|
|
this.isShowUploadFile = false;
|
||
|
|
this.$emit('show', this.isShowUploadFile);
|
||
|
|
uploadFile(file, this.message);
|
||
|
|
},
|
||
|
|
message (item) {
|
||
|
|
this.$message({
|
||
|
|
message: '上传成功',
|
||
|
|
type: 'success'
|
||
|
|
});
|
||
|
|
this.uploadSuccess = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|