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">
v-if="videoForm.Video ===''" :show-file-list="false" :http-request="addImage" :before-upload="beforeAvatarUpload" :on-progress="uploadVideoProcess" :on-remove="handleRemove">
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
}
}
}
}
}
.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;
}
引用组件
setVideo(data) {
this.form.video_url = data
}
setImageLists(data) {
this.$set(this.form, 'imgs', this.imagelist.map(e => e.url))
},