<template>
|
<div>
|
<!-- accept="video/mp4" -->
|
<el-upload
|
ref="refUploadFile"
|
action="#"
|
:before-upload="beforeUploadFile"
|
:limit="1"
|
:accept="accept"
|
:file-list="uploadFiles"
|
:on-change="addUploadImg"
|
:on-remove="delUploadImg"
|
:http-request="reqUploadFile"
|
style="width: 200px"
|
>
|
<el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">上传文件</el-button>
|
<div @click.stop>
|
<!-- 视频 -->
|
<video
|
v-if="type===0&&uploadFiles.length"
|
class="com-up-video"
|
:src="uploadFiles[0].url"
|
controls="controls"
|
>您的浏览器不支持视频播放</video>
|
<!-- 音频 -->
|
<audio
|
v-if="type===1&&uploadFiles.length"
|
:src="uploadFiles[0].url"
|
style="width: 230px;height: 40px;"
|
controls="controls"
|
/>
|
<!-- 图片 -->
|
<el-image
|
v-if="type===2&&uploadFiles.length"
|
class="com-up-video"
|
:src="uploadFiles[0].url"
|
fit="contain"
|
:preview-src-list="[uploadFiles[0].url]"
|
/>
|
</div>
|
</el-upload>
|
|
<!-- upload放大图片 -->
|
<el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
|
<img style="max-width:100%" :src="uploadPreviewUrl" alt="">
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import mixin_upload from '@/mixins/upload.js' // 通用上传文件预览
|
export default {
|
mixins: [mixin_upload],
|
model: {
|
prop: 'uploadFiles',
|
event: 'change'
|
},
|
props: {
|
uploadFiles: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
// 0视频1音频2图片
|
type: {
|
type: Number,
|
default: 0
|
}
|
|
},
|
|
data() {
|
return {
|
callback: null,
|
isCanAdd: true,
|
accept: 'video/mp4'
|
}
|
},
|
watch: {
|
type(type) {
|
if (this.type === 0) this.accept = 'video/mp4'
|
if (this.type === 1) this.accept = 'audio/mp3,audio/mpeg'
|
if (this.type === 2) this.accept = 'image/jpeg,image/jpg,image/gif,image/png'
|
}
|
},
|
methods: {
|
// 上传文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
// 上传前回调
|
beforeUploadFile(file) {
|
if (this.type === 0) this.beforeUploadVideo(file)
|
if (this.type === 1) this.beforeUploadAudio(file)
|
if (this.type === 2) this.beforeUploadImg(file)
|
},
|
beforeUploadVideo(file) {
|
var fileSize = file.size / 1024 / 1024 < 50
|
if (['video/mp4'].indexOf(file.type) === -1) {
|
this.$message.error('必须是mp4文件')
|
return false
|
}
|
if (!fileSize) {
|
this.$message.error('视频大小不能超过50MB')
|
return false
|
}
|
},
|
beforeUploadAudio(file) {
|
console.log('file.type', file.type)
|
var fileSize = file.size / 1024 / 1024 < 50
|
if (['audio/mp3'].indexOf(file.type) === -1 && ['audio/mpeg'].indexOf(file.type) === -1) {
|
this.$message.error('必须是mp3文件')
|
return false
|
}
|
if (!fileSize) {
|
this.$message.error('音频大小不能超过50MB')
|
return false
|
}
|
},
|
beforeUploadImg(file) {
|
const isImg = file.type.indexOf('image/') > -1
|
const isTooLarge = file.size / 1024 / 1024 > 4
|
if (!isImg) {
|
this.$message.error('必须是选择图片文件')
|
return false
|
} else if (isTooLarge) {
|
this.$message.error('请勿上传大于4MB的图片')
|
return false
|
}
|
},
|
// 增加文件
|
addUploadImg(file, fileList) {
|
this.$emit('change', fileList)
|
console.log(fileList)
|
},
|
// 删除文件
|
delUploadImg(file, fileList) {
|
this.$emit('change', fileList)
|
},
|
|
// 上传文件 uploadType 0图片1视频2音频
|
reqUploadFile(res) {
|
var uploadType = 0
|
if (this.type === 0) uploadType = 1
|
if (this.type === 1) uploadType = 2
|
if (this.type === 2) uploadType = 0
|
const file = res.file
|
const formData = new FormData()
|
formData.append('file', file)
|
this.postFN({
|
url: 'admin/image/upload?type=' + uploadType,
|
header: { 'Content-Type': 'multipart/form-data' },
|
params: formData,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
// path: 'https://music.163.com/song/media/outer/url?id=1805088448.mp3'
|
path: 'https://www.w3school.com.cn/i/movie.mp4'
|
}
|
}
|
}, (inf) => {
|
// 替换掉未上传的图片
|
this.$emit('change', [{ name: '素材', url: inf.path, status: 'success' }])
|
|
console.log('上传文件成功且结束')
|
|
// 提交
|
// this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
|
this.callback && this.callback(inf.path)
|
})
|
}
|
// 上传文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
}
|
}
|
</script>
|
|
<style>
|
.el-upload-list__item{
|
transition: none;
|
}
|
</style>
|
