<template>
|
<div>
|
<el-upload
|
:limit="limit"
|
:action="uploadUrl"
|
accept="image/*,video/*"
|
:data="{sysCode}"
|
:file-list="UrlList"
|
:headers="{ token: token }"
|
list-type="picture-card"
|
:before-upload="before_upload"
|
:on-change="handleImgChange"
|
:on-success="handleUploadSuccess"
|
>
|
<i slot="default" class="el-icon-plus" />
|
<div slot="file" slot-scope="{ file }">
|
<img
|
v-if="file.type == 1"
|
class="el-upload-list__item-thumbnail"
|
:src="file.url"
|
alt=""
|
>
|
<video v-if="file.type == 2" :src="file.url" style="width: 100%">
|
您的浏览器不支持 video 标签。
|
</video>
|
<audio
|
v-if="file.type == 3"
|
controls
|
:src="file.url"
|
style="width: 100%"
|
>
|
您的浏览器不支持该音频格式。
|
</audio>
|
<span class="el-upload-list__item-actions">
|
<span
|
class="el-upload-list__item-preview"
|
@click="handlePictureCardPreview(file)"
|
>
|
<i class="el-icon-zoom-in" />
|
</span>
|
<span
|
v-if="!disabled"
|
class="el-upload-list__item-delete"
|
@click="handleImgRemove(file)"
|
>
|
<i class="el-icon-delete" />
|
</span>
|
</span>
|
</div>
|
</el-upload>
|
<el-dialog :visible.sync="dialogVisible" width="600px" :modal-append-to-body="false" :destroy-on-close="true" @close="handleCancel">
|
<div style="text-align: center;">
|
<img
|
v-if="dialogType == 1"
|
class="el-upload-list__item-thumbnail"
|
style="width: 300px;height: 500px"
|
:src="dialogImageUrl"
|
alt=""
|
>
|
<video
|
v-if="dialogType == 2"
|
ref="video"
|
style="width: 300px;height: 500px"
|
:src="dialogImageUrl"
|
controls
|
autoplay
|
/>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getToken } from '@/utils/auth'
|
import bus from '@/Bus'
|
export default {
|
name: 'UploadExcel',
|
props: {
|
uploadUrl: {
|
type: String,
|
required: true
|
},
|
sysCode: {
|
type: String,
|
required: true
|
}
|
},
|
data() {
|
return {
|
token: getToken(),
|
limit: 9, // 限制上传数量
|
dialogImageUrl: null,
|
dialogVisible: false,
|
UrlList: [],
|
disabled: false,
|
dialogType: null,
|
fileBaseList: [],
|
fileChangeList: []
|
}
|
},
|
|
methods: {
|
handleCancel(e) {
|
if (this.$refs.video) {
|
this.$refs.video.pause()
|
}
|
this.dialogImageUrl = ''
|
this.dialogVisible = false
|
},
|
// 上传前
|
before_upload(file) {
|
const fileSize = file.size
|
const FIVE_M = 100 * 1024 * 1024
|
// 不允许上传大于2M
|
if (fileSize > FIVE_M) {
|
this.$message.error('最大上传1002M')
|
return false
|
}
|
const name = file.name.substring(file.name.lastIndexOf('.') + 1)
|
const nameList = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jpe', 'mp4', 'm2v', 'mkv']
|
if (!nameList.includes(name)) {
|
this.$message.error('只能上传图片和视频！')
|
return false
|
}
|
return true
|
},
|
|
handlePictureCardPreview(file) {
|
console.log('file', file)
|
// const baseUrl = `${requestObj.baseUrl}/static/img/`
|
this.dialogImageUrl = file.url
|
console.log('this.dialogImageUrl', file)
|
this.dialogType = file.type
|
this.dialogVisible = true
|
},
|
// 图片改变
|
handleImgChange(file, fileList) {
|
bus.$emit('changeFileAfterList', 'change', fileList)
|
|
this.UrlList = fileList
|
},
|
// 图片移除
|
handleImgRemove(file, fileList) {
|
fileList = this.UrlList
|
const index = fileList.indexOf(file)
|
fileList.splice(index, 1)
|
bus.$emit('changeFileAfterList', 'detail', fileList)
|
},
|
// 图片上传成功
|
handleUploadSuccess(response, file, fileList) {
|
console.log(file)
|
this.UrlList.push({
|
url: file.url
|
})
|
bus.$emit('changeFileAfterList', 'success', fileList)
|
file.type = this.matchType(file.response.data.fileName)
|
},
|
|
// 根据文件名后缀区分 文件类型
|
/*
|
* @param: fileName - 文件名称
|
* @param: 数据返回 1) 无后缀匹配 - false
|
* @param: 数据返回 2) 匹配图片 - image
|
* @param: 数据返回 8) 匹配 视频 - video
|
* @param: 数据返回 9) 匹配 音频 - radio
|
* @param: 数据返回 10) 其他匹配项 - other
|
*/
|
matchType(fileName) {
|
// 后缀获取
|
var suffix = ''
|
// 获取类型结果
|
var result = ''
|
try {
|
var flieArr = fileName.split('.')
|
suffix = flieArr[flieArr.length - 1]
|
} catch (err) {
|
suffix = ''
|
}
|
// fileName无后缀返回 false
|
if (!suffix) {
|
result = false
|
return result
|
}
|
// 图片格式
|
var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jpe']
|
// 进行图片匹配
|
result = imglist.some(function(item) {
|
return item === suffix
|
})
|
if (result) {
|
result = '1'
|
return result
|
}
|
// 匹配 视频
|
var videolist = ['mp4', 'm2v', 'mkv']
|
result = videolist.some(function(item) {
|
return item === suffix
|
})
|
if (result) {
|
result = '2'
|
return result
|
}
|
// 匹配 音频
|
var radiolist = ['mp3', 'wav', 'wmv', 'flac']
|
result = radiolist.some(function(item) {
|
return item === suffix
|
})
|
if (result) {
|
result = '3'
|
return result
|
}
|
// 其他 文件类型
|
result = 'other'
|
return result
|
}
|
|
}
|
}
|
</script>
|
<style lang="scss" scope>
|
.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: 148px;
|
height: 148px;
|
line-height: 148px;
|
text-align: center;
|
}
|
.avatar {
|
width: 148px;
|
max-height: 148px;
|
display: block;
|
}
|
.avatar-video {
|
width: 200px;
|
max-height: 200px;
|
display: block;
|
}
|
</style>
|
