重置組件目的
對(duì)Upload 上傳組件在簡(jiǎn)化的目的是對(duì)文件上傳前的限制都統(tǒng)一到組件中去完成不在繁瑣的每個(gè)去寫嗜诀，同時(shí)增加上傳后圖片的大圖預(yù)覽隆敢，音頻試聽筑公，視頻觀看等尊浪。
組件代碼（簡(jiǎn)化后代碼基本兼容原有使用方法除了slot="file"外）
<template>
<div>
<el-upload :class="(listType=='single' && !$slots.default)? 'avatar-uploader':''" :action="url"
:headers="headers" :data="data" :multiple="multiple" :name="name" :drag="drag"
:with-credentials="withCredentials" :disabled="disabled" :limit="limit"
:show-file-list="isShowFileList" :list-type="customListType" :fileList="fileList"
:auto-upload="autoUpload" :http-request="httpRequest"
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:on-error="handleError"
:on-preview="handlePreview"
:on-change="handleChange"
:on-progress="handleProgress"
:before-remove="handleBeforeRemove"
:on-remove="handleRemove">
<template v-if="drag && !$slots.default">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
{{$t('pages.common.dragFilesHere')}}<em>{{$t('pages.common.clickUpload')}}</em></div>
</template>
<!--單圖片上傳-->
<template v-else-if="listType=='single' && !$slots.default">
<el-image v-if="imageUrl" :src="imageUrl" class="avatar"></el-image>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</template>
<template v-else-if="(listType=='picture-card' || listType=='video') && !$slots.default">
<i class="el-icon-plus"></i>
</template>
<template v-else-if="!$slots.default">
<el-button size="small" type="primary">{{$t('pages.common.clickUpload')}}</el-button>
</template>
<slot></slot>
<template slot="file" slot-scope="{file}" v-if="listType=='video'">
<el-progress v-if="file.status === 'uploading'" type="circle"
:stroke-width="6"
:percentage="parsePercentage(file.percentage)">
</el-progress>
<div class="el-upload-list__item-thumbnail" v-if="file">
<video class="el-upload-list__item-thumbnail" :src="file.url"></video>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview"
@click="handlePreview(file)">
<i class="sx-icon-video" style="font-size: 19px"></i>
</span>
<span class="el-upload-list__item-delete">
<i class="el-icon-delete" @click="handleRemove(file,fileList)"></i>
</span>
</span>
</div>
</template>
</el-upload>
<!-- 查看大圖 -->
<el-dialog title="大圖預(yù)覽" :visible.sync="dialogImageVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="大圖">
</el-dialog>
<!--觀看視頻-->
<el-dialog title="賞析視頻" :visible.sync="dialogVideoVisible" @close="handlePause" append-to-body>
<video ref="video" style="width: 100%; height: 100%; display: block; outline: none;" :src="dialogVideoUrl"
controls
autoplay></video>
</el-dialog>
<!--試聽音頻-->
<el-dialog title="試聽音頻" :visible.sync="dialogAudioVisible" @close="handlePause" append-to-body>
<audio ref="audio" style="width: 100%; height: 50px; display: block; outline: none;" :src="dialogAudioUrl"
controls
autoplay></audio>
</el-dialog>
</div>
</template>
<script>
import isEqual from 'lodash/isEqual'
/*自定義上傳 - element-ui上傳再封裝*/
export default {
name: "ElUploadCustom",
data() {
return {
dialogImageVisible: false,
dialogImageUrl: null,
dialogVideoVisible: false,
dialogVideoUrl: null,
dialogAudioVisible: false,
dialogAudioUrl: null,
imageUrl: ''
}
},
model: {
prop: 'value',
event: 'change'
},
props: {
value:{
type: Array,
default() {
return [];
}
},
action: {
type: String,
required: true
},
headers: {
type: Object,
default() {
return {};
}
},
data: Object,
multiple: Boolean,
name: {
type: String,
default: 'file'
},
drag: Boolean,
accept: String,
flieSize: Number,
withCredentials: Boolean,
showFileList: {
type: Boolean,
default: true
},
listType: {
type: String,
default: 'text' // text,picture,picture-card single:單圖片上傳 video：上傳視頻 audio: 上傳音頻
},
disabled: Boolean,
limit: Number,
fileList: {
type: Array,
default() {
return [];
}
},
autoUpload: {
type: Boolean,
default: true
},
httpRequest: Function,
beforeUpload: Function,
beforeRemove: Function,
onRemove: Function,
onChange: Function,
onPreview: Function,
onSuccess: Function,
onProgress: Function,
onError: Function,
onExceed: Function
},
watch: {
fileList: {
handler: function (val) {
if (this.listType == 'single') {
this.imageUrl = val.length ? val[0].url : '';
}
},
immediate: true
}
},
computed: {
url() {
if (/^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/.test(this.action)) {
return this.action
} else {
if (typeof this.httpRequest == "function") {
return '#';
} else {
return this.$http.defaults.baseURL + this.action;
}
}
},
isShowFileList() {
if (this.listType == 'single') {
return false;
} else {
return this.showFileList;
}
},
customListType() {
if (this.listType == 'single' || this.listType == 'audio') {
return 'text';
} else if (this.listType == 'video') {
return 'picture-card';
} else {
return this.listType
}
}
},
methods: {
//文件上傳前事件
handleBeforeUpload(file) {
if (this.beforeUpload) {
return this.beforeUpload(file);
} else {
//判斷文件類型
const typeLimit = this.accept ? this.accept.split(',').includes(file.type) : true;
//判斷文件大小
const sizeLinit = this.flieSize ? file.size / 1024 < this.flieSize : true;
if (!typeLimit) {
this.$message.error(this.$t('pages.common.uploadFileType', {type: this.accept}));
}
if (!sizeLinit) {
let flieSize = this.flieSize > 1024 ? parseInt(this.flieSize / 1024) + 'M' + this.flieSize % 1024 : this.flieSize;
this.$message.error(this.$t('pages.common.uploadFileSize', {size: flieSize}));
}
return typeLimit && sizeLinit;
}
},
//文件上傳超出限制事件
handleExceed(files, fileList) {
if (this.onExceed) {
this.onExceed(files, fileList);
} else {
this.$message.error(this.$t('pages.common.uploadFileNumber', {number: this.limit}))
}
},
//上傳進(jìn)度事件
handleProgress(event, file, fileList) {
if (this.onProgress) {
this.onProgress(event, file, fileList)
}
},
//上傳成功事件
handleSuccess(res, file, fileList) {
if (this.onSuccess) {
this.onSuccess(res, file, fileList);
} else {
if (!res.code) {
if (this.listType == 'single') {
file.url = res.data;
this.imageUrl = res.data;
this.$emit('change', [file]);
} else {
fileList.forEach(item => {
if (isEqual(item, file)) {
item.url = res.data
}
});
this.$emit('change', fileList);
}
} else {
this.handleRemove(file, fileList);
this.$message.error(this.$t('pages.common.uploadFileError'));
}
}
},
//預(yù)覽事件
handlePreview(file) {
if (this.onPreview) {
this.onPreview(file);
} else {
if (this.listType == 'audio') {
this.dialogAudioUrl = file.url;
this.dialogAudioVisible = true;
if (this.$refs.video) {
this.$refs.video.remove()
}
} else if (this.listType == 'video') {
this.dialogVideoUrl = file.url;
this.dialogVideoVisible = true;
if (this.$refs.audio) {
this.$refs.audio.remove()
}
} else {
//沒有提供文件類型就下載判定
if (!file.raw) {
let xhr = new XMLHttpRequest();
xhr.open("GET", file.url, true);
xhr.responseType = "blob";
xhr.onload = () => {
file.raw = xhr.response
//判斷當(dāng)前點(diǎn)擊文件是否為圖片類型 是顯示大圖預(yù)覽
if (['image/png', 'image/jpeg', 'image/gif', 'application/x-jpg', 'application/x-png'].includes(file.raw.type)) {
this.dialogImageUrl = file.url;
this.dialogImageVisible = true;
}
//判斷當(dāng)前點(diǎn)擊文件是否為音頻類型 是顯示試聽音頻
if (['audio/mp3'].includes(file.raw.type)) {
this.dialogAudioUrl = file.url;
this.dialogAudioVisible = true;
}
//判斷當(dāng)前點(diǎn)擊文件是否為視頻類型 是顯示賞析視頻
if (['video/mp4'].includes(file.raw.type)) {
this.dialogVideoUrl = file.url;
this.dialogVideoVisible = true;
}
};
xhr.send();
} else {
//判斷當(dāng)前點(diǎn)擊文件是否為圖片類型 是顯示大圖預(yù)覽
if (['image/png', 'image/jpeg', 'image/gif'].includes(file.raw.type)) {
this.dialogImageUrl = file.url;
this.dialogImageVisible = true;
}
//判斷當(dāng)前點(diǎn)擊文件是否為音頻類型 是顯示試聽音頻
if (['audio/mp3'].includes(file.raw.type)) {
this.dialogAudioUrl = file.url;
this.dialogAudioVisible = true;
}
//判斷當(dāng)前點(diǎn)擊文件是否為視頻類型 是顯示賞析視頻
if (['video/mp4'].includes(file.raw.type)) {
this.dialogVideoUrl = file.url;
this.dialogVideoVisible = true;
}
}
}
}
},
//上傳失敗事件
handleError(err, file, fileList) {
if (this.onError) {
this.onError(err, file, fileList);
} else {
this.handleRemove(file, fileList);
this.$message.error(this.$t('pages.common.uploadFileError'));
}
},
//文件移除前事件
handleBeforeRemove(file, fileList) {
if (this.beforeRemove) {
this.beforeRemove(file, fileList);
}
},
//刪除事件
handleRemove(file, fileList) {
if (this.onRemove) {
this.onRemove(file, fileList);
} else {
let index = fileList.findIndex(item => item.uid == file.uid);
if (index != -1) {
fileList.splice(index, 1);
}
this.$emit('change', fileList);
}
},
//文件狀態(tài)改變事件
handleChange(file, fileList) {
if (this.onChange) {
this.onChange(file, fileList);
}
},
//暫停播放音頻視頻
handlePause() {
if (this.$refs.audio) {
this.$refs.audio.pause();
this.dialogAudioVisible = false;
}
if (this.$refs.video) {
this.$refs.video.pause();
this.dialogVideoVisible = false;
}
},
//進(jìn)度百分比
parsePercentage(val) {
return parseInt(val, 10);
},
},
created() {
}
}
</script>
<style scoped>
.avatar-uploader >>> .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
組件使用
<template>
//@getData獲取上傳的文件列表 :flie-size 限制文件上傳大新印（如下限制500kb）不填無(wú)限制 accept限制文件上傳類型（如下只能上傳png和jpg圖片）不填無(wú)限制
<el-upload-custom v-model="picurls" list-type="picture-card" :file-list="picurls"
action="/SXBS-INFORMATION/file/uploadFileUsingOriginalFilename"
:flie-size="500" accept="image/png,image/jpeg">
</el-upload-custom>
</template>
<script>
export default {
methods: {
},
data() {
return {
picurls:[]
};
},
mounted(){
},
created() {
}
}
</script>
