upload 上传图片和 video
<template>
<div class="comp-items">
<el-tabs v-model="typeVal" @tab-click="tabclick" class="my-tabs">
<el-tab-pane v-for="item in tabsType" :key="item.value" :name="item.value" :label="item.label">
<div class="pane-wrapper">
<div class="pane-content">
<el-upload
:ref="'myUpload'+item.value"
:action="'/apis/hmfsMedia/v2/'+(item.value === '1' ? 'image' : 'video')+'/upload'"
:accept="item.value === '1' ? 'image/*' : 'video/mp4'"
:data="{
areaLayer: areaLayer,
sourceType: 3,
description: '后台图片视频异常库',
}"
list-type="picture-card"
:file-list="item.value === '1' ? imageException : videoException"
:on-success="imgUplandimg"
:on-change="handleImgChange"
:on-preview="handleImgPreview"
:name="item.value === '1' ? 'image' : 'video'"
:auto-upload="true"
:before-upload="item.value === '1' ? handleImageBefore : handleVideoBefore"
>
<!-- <div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handleImgPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
</span>
</div> -->
<i class="el-icon-plus"></i>
</el-upload>
</div>
</div>
</el-tab-pane>
</el-tabs>
<el-dialog :visible.sync="uploadImgVisible" :append-to-body="true">
<img width="100%" :src="uploadImgUrl" style="max-height: 65vh;" alt="" />
</el-dialog>
<el-dialog :visible.sync="uploadVideoVisible" :destroy-on-close="true" :append-to-body="true">
<video width="100%" :src="uploadVideoUrl" :autoplay='false' style="max-height: 65vh;" controls alt="" />
</el-dialog>
</div>
</template>
<script>
export default {
props: {
itemType: {
type: Object
}
},
data() {
return {
areaLayer: this.$store.state.areaLayer,
SSOID: this.$store.state.cookie,
typeVal: "1",
tabsType: [{
value: "1",
label: "图片"
},{
value: "2",
label: "视频"
}],
uploadImgVisible: false,
uploadImgUrl: "",
uploadVideoVisible: false,
uploadVideoUrl: "",
imageException: [],
videoException: []
}
},
methods: {
handleImgPreview(file) {
if(file.response && file.name.indexOf("mp4") > -1) {
this.uploadVideoUrl = file.response.result.url;
this.uploadVideoVisible = true;
return
}
if(file.video) {
this.uploadVideoUrl = file.video;
this.uploadVideoVisible = true;
return
}
this.uploadImgUrl = file.url;
this.uploadImgVisible = true;
},
imgUplandimg(res) {
if(res.success) {
this._uploadVideoException(res.result.url, res.result.frameUrl)
}
},
handleImgChange(file) {
if(this.typeVal === "2") {
if(file.response && file.response.success) {
file.url = file.response.result.frameUrl
}
}
},
handleImageBefore(file) {
if(file.type.indexOf("png") < 0 && file.type.indexOf("jpg") < 0 && file.type.indexOf("jpeg") < 0) {
this.$message.error("请上传png、jpg、jpeg格式的图片!!")
return false
}
},
handleVideoBefore(file) {
if(file.type.indexOf("mp4") < 0) {
this.$message.error("请上传mp4格式的视频!!")
return false
}
},
tabclick(v) {
this._getListException()
},
_uploadVideoException(url, frameUrl) {
let params = {
areaLayer: this.areaLayer,
SSOID: this.SSOID,
typeName: this.itemType.label,
type: this.itemType.value,
url: url
}
if(this.typeVal === "2") {
params.firstUrl = frameUrl
}
this.$axios.post("/apis/hmcsMonitor/v2/"+ (this.typeVal === "1" ? "imageException" : "videoException") +"/add", params).then(res => {
if(res.data.success) {
this.$message({
message: '上传成功',
type: 'success'
});
}
})
},
_getListException(type) {
let params = {
areaLayer: this.areaLayer,
SSOID: this.SSOID,
pageNo: 1,
pageSize: 9999,
typeName: this.itemType.label,
type: this.itemType.value
}
let currtype = type ? type : this.typeVal
let objname = currtype === "1" ? "imageException" : "videoException"
if(this[objname].length) {
return
}
this.$axios.get("/apis/hmcsMonitor/v2/"+(currtype === "1" ? "imageException" : "videoException")+"/listForPage", {params: params}).then(res => {
if(res.data.success) {
this[objname] = res.data.result.list.map(item => {
return {
name: item.id,
url: currtype === "1" ? item.url : item.firstUrl,
video: currtype === "1" ? null : item.url
}
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
.my-tabs {
border-top: 1px solid #E4E7ED;
}
.pane-wrapper {
padding: 0 0 15px;
}
.pane-content {
position: relative;
min-height: 148px;
max-height: 468px;
padding: 0 50px;
font-size: 0;
overflow: auto;
}
</style>
<style>
.my-tabs .el-tabs__nav-wrap {
padding: 0 15px;
}
.my-tabs .el-upload-list--picture-card .el-upload-list__item:first-child {
margin-left: 156px;
}
.my-tabs .el-upload-list__item-delete {
display: none !important;
}
.my-tabs .el-upload--picture-card {
position: absolute;
left: 50px;
top: 0;
}
</style>
加班万岁!