基于element ui 的图片视频上传，且可以传两张图片一个视频（二选一）（包含图片压缩）

<template>

<div>

<!-- {{sendType}} -->

<div v-if="maxCount == 2">

<el-upload

action="http://localhost:80"

:class="{disabled:hideAddBtn}"

:limit='maxCount'

:on-exceed='exceedTips'

list-type="picture-card"

ref="upload"

:file-list="imagelist"

:http-request='addImage'

:before-upload="beforeAvatarUpload"

:on-remove="handleRemove">

<i class="el-icon-plus"></i>

</el-upload>

<el-dialog :visible.sync="dialogVisible" width="30%">

<img width="100%" style="min-width:148px" :src="dialogImageUrl" alt="">

</el-dialog>

</div>

<div v-if="maxCount == 1">

<el-upload class="el-upload--picture-card" action="http://localhost:80"

v-if="videoForm.Video ===''"

:show-file-list="false"

:http-request="addImage"

:before-upload="beforeAvatarUpload"

:on-progress="uploadVideoProcess"

:on-remove="handleRemove">

<i style="margin-left:60px" class="el-icon-plus"></i>

<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>

</el-upload>

<video v-if="videoForm.Video !='' && videoFlag == false" :src="videoForm.Video" :poster="videoForm.Video + '?x-oss-process=video/snapshot,t_7000,f_jpg,w_0,h_0,m_fast'" class="avatar" controls="controls">您的浏览器不支持视频播放</video>

<p><van-icon name="delete" size="0.6rem" @click="dele" class="dele" /></p>

</div>

</div>

</template>

 

<script>

import { getSuffix, randomString } from '@/utils'

import { getPolicy, uploadToOss } from '@/api/common'

import ImageCompressor from 'image-compressor.js'

export default {

data() {

return {

videoFlag: false,

videoUploadPercent: 0,

videoForm: {

Video: ''

},

dialogImageUrl: '',

dialogVisible: false,

width: '',

height: '',

maxCount: 2,

hideAddBtn: false // 能不能再上传

}

},

props: {

// 最大小传数

// maxCount: {

// type: Number,

// default: 1

// },

sendType: {

type: String,

default: ''

},

// 图片列表 { url: xx }

imagelist: {

type: Array,

default: []

}

},

watch: {

imagelist: function(n, o) {

if (n.length !== o.length) {

this.updateAddBtnStatus()

}

}

},

created() {

this.updateAddBtnStatus()

if (this.sendType === 'good') {

this.width = 440

this.height = 440

} else if (this.sendType === 'hotgood') {

this.width = 750

this.height = 335

} else if (this.sendType === 'base') {

this.width = 750

this.height = 1220

} else if (this.sendType === 'baselogo') {

this.width = 375

this.height = 260

} else if (this.sendType === 'touxiang') {

this.width = 200

this.height = 200

} else if (this.sendType === 'share') {

this.width = 200

this.height = 200

} else if (this.sendType === 'sharetop') {

this.width = 750

this.height = 290

} else if (this.sendType === 'game') {

this.width = 672

this.height = 1010

} else if (this.sendType === 'add') {

this.width = 680

this.height = 400

} else if (this.sendType === 'template') {

this.width = 128

this.height = 128

} else if (this.sendType === 'topIMG') {

this.width = 750

this.height = 500

} else if (this.sendType === 'videoPreview') {

this.width = 466

this.height = 302

} else if (this.sendType === 'videoBG') {

this.width = 750

this.height = 718

}

},

methods: {

// 超出提示

exceedTips() {

this.updateAddBtnStatus()

this.$message({

type: 'error',

message: `上传文件个数超出限制!最多上传${this.maxCount}张图片!`

})

},

// 长度检测（关系到显不显加按钮）

updateAddBtnStatus() {

this.hideAddBtn = this.imagelist.length === this.maxCount

this.$emit('setImageLists', this.imagelist)

},

uploadVideoProcess(event, file, fileList) {

this.videoFlag = true

this.videoUploadPercent = file.percentage.toFixed(0)

},

// 图片添加 | 上传

addImage(content) {

const _this = this

if (this.maxCount === 2) {

new ImageCompressor(content.file, {  // 此方法为上传前压缩图片 见https://github.com/IronPans/img-compressor

quality: 0.6,

success(result) {

const formData = new FormData()

getPolicy().then(res => {

var date = new Date().getFullYear()

var date1 = new Date().getMonth() + 1

var date2 = new Date().getDate()

var a = ''

console.error(getSuffix(content.file.name))

if (getSuffix(content.file.name) !== '.MOV') {

a = res.dir + process.env.NODE_ENV + '/' + date + '/' + date1 + '/' + date2 + '/' + randomString() + getSuffix(content.file.name)

} else {

a = res.dir + process.env.NODE_ENV + '/' + date + '/' + date1 + '/' + date2 + '/' + randomString() + '.mp4'

}

formData.append('key', a)

formData.append('policy', res.policy)

formData.append('OSSAccessKeyId', res.accessid)

formData.append('success_action_status', 200)

// formData.append('callback', res.callback)

formData.append('signature', res.signature)

formData.append('host', res.host)

formData.append('file', result)

if (this.maxCount === 1) {

this.videoFlag = false

this.videoUploadPercent = 0

}

uploadToOss(formData).then((response) => {

// console.error(response)

// if (response) {

_this.imagelist.push({ url: res.host + '/' + a })

_this.updateAddBtnStatus()

// }

})

})

}

})

} else if (this.maxCount === 1) {

const formData = new FormData()

getPolicy().then(res => {

console.log(process.env.NODE_ENV)

var date = new Date().getFullYear()

var date1 = new Date().getMonth() + 1

var date2 = new Date().getDate()

var a = ''

if (getSuffix(content.file.name) !== '.MOV') {

a = res.dir + process.env.NODE_ENV + '/' + date + '/' + date1 + '/' + date2 + '/' + randomString() + getSuffix(content.file.name)

} else {

a = res.dir + process.env.NODE_ENV + '/' + date + '/' + date1 + '/' + date2 + '/' + randomString() + '.mp4'

}

formData.append('key', a)

formData.append('policy', res.policy)

formData.append('OSSAccessKeyId', res.accessid)

formData.append('success_action_status', 200)

// formData.append('callback', res.callback)

formData.append('signature', res.signature)

formData.append('host', res.host)

formData.append('file', content.file)

if (this.maxCount === 1) {

this.videoFlag = false

this.videoUploadPercent = 0

}

uploadToOss(formData).then((response) => {

_this.videoForm.Video = res.host + '/' + a

_this.$emit('setVideo', this.videoForm.Video)

})

})

}

},

// 图片删除

handleRemove(file) {

const checkField = 'url'

for (let i = 0; i < this.imagelist.length; i++) {

if (this.imagelist[i][checkField] === file[checkField]) {

this.imagelist.splice(i, 1)

break

}

}

this.updateAddBtnStatus()

},

dele() {

this.videoForm.Video = ''

this.maxCount = 2

this.$emit('setVideo', this.videoForm.Video)

this.hideAddBtn = false

},

// 图片预览

handlePictureCardPreview(file) {

this.dialogImageUrl = file.url

this.dialogVisible = true

},

// 上传前检测

beforeAvatarUpload(file) {

var w = this.width

var h = this.height

const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'

const isVideo = file.type === 'video/mp4' || file.type === 'video/ogg' || file.type === 'video/quicktime'

if (isJPG) {

this.hideAddBtn = true

this.maxCount = 2

const isLt2M = file.size < 4000000

if (!isJPG) {

this.$message.error('上传icon只能是 PNG或JPG 格式!')

}

if (!isLt2M) {

this.$message.error('上传icon大小不能超过 4mb!')

}

const isSize = new Promise(function(resolve, reject) {

var width = w

var height = h

var _URL = window.URL || window.webkitURL

var img = new Image()

img.onload = function() {

var valid = img.width >= width && img.height >= height

valid ? resolve() : reject()

}

img.src = _URL.createObjectURL(file)

}).then(() => {

return file

}, () => {

this.$message.error('上传的icon必须是等于或大于' + this.width + '*' + this.height + '!')

return Promise.reject()

})

return isJPG && isLt2M && isSize

} else if (isVideo) {

this.maxCount = 1

const isLt10M = file.size / 1024 / 1024 < 4

if (['video/mp4', 'video/ogg', 'video/quicktime'].indexOf(file.type) === -1) {

this.$message.error('请上传正确的视频格式')

return false

}

if (!isLt10M) {

this.$message.error('上传视频大小不能超过4MB哦!')

return false

}

}

}

}

}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.avatar{

width: 300px !important;

height: 300px !important;

}

.dele{

position: absolute;

top: 15%;

left: 40%;

}

.el-upload-list--picture-card .el-upload-list__item img {

width: 150px !important;

}

.el-upload--picture-card{

width: 42% !important;

}

</style>

引用组件

<ay-uploadimg @setVideo='setVideo' :setVideo='video_url' :imagelist='imagelist' @setImageLists='setImageLists' />

setVideo(data) {

this.form.video_url = data

}

setImageLists(data) {

this.$set(this.form, 'imgs', this.imagelist.map(e => e.url))

},