<template>
|
<div>
|
<el-dialog
|
:title="'上传'+file_type_name"
|
append-to-body
|
:modal-append-to-body="true"
|
:visible.sync="uploadModal"
|
:width="isIframe ? '100%' : '800px'"
|
:fullscreen="isIframe"
|
@close="closed"
|
top="5vh"
|
>
|
<div class="main" v-loading="loading">
|
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
<el-form-item :label="'上传'+file_type_name+'：'">
|
<div class="acea-row">
|
<div class="uploadCont">
|
<el-upload
|
ref="upload"
|
action="string"
|
list-type="picture-card"
|
:on-change="fileChange"
|
:file-list="ruleForm.imgList"
|
:auto-upload="false"
|
:data="uploadData"
|
:before-upload="beforeUpload"
|
:multiple="true"
|
:limit="config.total"
|
:accept="accept"
|
>
|
<i slot="default" class="el-icon-plus"></i>
|
<div
|
v-if="['png','jpg','gif','jepg','svg', 'mp4'].indexOf(file.name.substr(file.name.lastIndexOf('.')+1)) != -1"
|
slot="file"
|
slot-scope="{ file }"
|
draggable="false"
|
@dragstart="handleDragStart($event, file)"
|
@dragover="handleDragOver($event, file)"
|
@dragenter="handleDragEnter($event, file)"
|
@dragend="handleDragEnd($event, file)"
|
>
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" v-if="config.file_type == 'image'" />
|
<video v-else height="80" width="80" :src="file.url" :autoplay="false">
|
您的浏览器不支持 video 标签
|
</video>
|
<i class="el-icon-error btndel" @click="handleRemove(file)" />
|
</div>
|
</el-upload>
|
<div class="tips">单次最多可上传{{ config.total }}{{ config.file_type == 'image'?'张':'个视频' }}，仅支持{{ config.file_type == 'image'?'jpg、jpeg、png':'mp4' }}格式，可拖拽调整上传顺序</div>
|
</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="small" @click="clear">取 消</el-button>
|
<el-button size="small" type="primary" @click="submitUpload">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import FileApi from '@/api/file.js';
|
export default {
|
components: {
|
|
},
|
data() {
|
return {
|
loading: false,
|
uploadModal: false,
|
uploadData: {},
|
ruleForm: {
|
imgList: [],
|
},
|
uploadResult: [],
|
accept: '',
|
file_type_name: '',
|
// rules: { type: [{ required: true, message: '请选择图片', trigger: 'change' }] },
|
};
|
},
|
props: ['config', 'isIframe', 'activity_id'],
|
watch: {
|
uploadModal: {
|
handler(newVal) {
|
|
},
|
immediate: true,
|
},
|
},
|
created() {
|
if (this.config['file_type'] == 'image') {
|
this.accept = 'image/jpeg,image/png,image/jpg';
|
this.file_type_name = '图片';
|
} else {
|
this.accept = 'video/mp4';
|
this.file_type_name = '视频';
|
}
|
},
|
methods: {
|
async submitUpload() {
|
if(this.ruleForm.imgList <= 0){
|
return this.$message.error('请选择要上传的' + this.file_type_name);
|
}
|
if (this.ruleForm.imgList.length) {
|
if (this.loading) return;
|
this.loading = true;
|
for (let i = 0; i < this.ruleForm.imgList.length; i++) {
|
const file = this.ruleForm.imgList[i].raw;
|
await this.uploadItem(file);
|
if (i == this.ruleForm.imgList.length - 1) {
|
// 将所有上传成功的文件入库
|
this.saveFile();
|
this.$message.success('上传成功');
|
this.$emit('uploadSuccess');
|
this.uploadModal = false;
|
this.loading = false;
|
this.initData();
|
}
|
}
|
}
|
},
|
uploadItem(file) {
|
let self = this;
|
return new Promise((resolve, reject) => {
|
const formData = new FormData();
|
formData.append('iFile', file);
|
formData.append("group_id", '');
|
formData.append("file_type", self.config.file_type);
|
FileApi.uploadFile(formData)
|
.then((res) => {
|
if (res.code == 1) {
|
// 将上传结果记录到数组
|
self.uploadResult.push(res.data);
|
resolve();
|
} else {
|
this.loading = false;
|
this.$message({
|
message: '上传失败',
|
type: 'error',
|
duration: 1000,
|
});
|
}
|
})
|
.catch((err) => {
|
this.loading = false;
|
this.$message.error(err.message);
|
});
|
});
|
},
|
saveFile() {
|
let self = this;
|
let form = [];
|
self.uploadResult.forEach((el) => {
|
form.push({
|
activity_id: self.activity_id,
|
file_id: el.file_id,
|
file_type: self.config.file_type
|
});
|
});
|
FileApi.saveActivityFile(form, true)
|
.then(data => {
|
self.loading = false;
|
// self.$message({
|
// message: data.msg,
|
// type: 'success'
|
// });
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
beforeUpload(file) {},
|
handleRemove(file) {
|
console.log(file);
|
let index = this.ruleForm.imgList.findIndex((e) => {
|
return e.url == file.url;
|
});
|
this.ruleForm.imgList.splice(index, 1);
|
},
|
async fileChange(file, fileList) {
|
if (this.config.file_type == 'image') {
|
if (['image/jpeg','image/png','image/jpg','image/gif'].indexOf(file.raw.type) == -1) {
|
return this.$message.error('请上传正确的文件格式！');
|
} else {
|
// if (file.size >= 2097152) {
|
// await this.comImg(file.raw).then((res) => {
|
// fileList.map((e) => {
|
// // if (e.uid === file.uid) {
|
// // e.raw = res;
|
// // }
|
// });
|
// });
|
// }
|
}
|
} else {
|
if (['video/mp4'].indexOf(file.raw.type) == -1) {
|
return this.$message.error('请上传正确的文件格式！');
|
}
|
}
|
this.ruleForm.imgList = fileList;
|
},
|
comImg(file) {
|
return new Promise((resolve, reject) => {
|
compressImg(file).then((res) => {
|
resolve(res);
|
});
|
});
|
},
|
// 移动
|
handleDragStart(e, item) {
|
this.dragging = item;
|
},
|
handleDragEnd(e, item) {
|
this.dragging = null;
|
},
|
handleDragOver(e) {
|
e.dataTransfer.dropEffect = 'move';
|
},
|
handleDragEnter(e, item) {
|
e.dataTransfer.effectAllowed = 'move';
|
if (item === this.dragging) {
|
return;
|
}
|
const newItems = [...this.ruleForm.imgList];
|
const src = newItems.indexOf(this.dragging);
|
const dst = newItems.indexOf(item);
|
newItems.splice(dst, 0, ...newItems.splice(src, 1));
|
this.ruleForm.imgList = newItems;
|
},
|
closed() {
|
this.initData();
|
},
|
clear() {
|
this.uploadModal = false;
|
this.initData();
|
},
|
initData() {
|
this.ruleForm.imgList = [];
|
},
|
}
|
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.main{
|
min-height: 400px;
|
}
|
.pictrue {
|
width: 80px;
|
height: 80px;
|
border: 1px dotted rgba(0, 0, 0, 0.1);
|
border-radius: 4px;
|
margin-right: 10px;
|
position: relative;
|
cursor: pointer;
|
img {
|
border-radius: 4px;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.btndel {
|
position: absolute;
|
z-index: 1;
|
font-size: 18px;
|
right: -5px;
|
top: -5px;
|
color: #999;
|
}
|
.form-width{
|
width: 280px;
|
}
|
|
.el-upload--picture-card, .el-upload-list--picture-card .el-upload-list__item{
|
width: 80px;
|
height: 80px;
|
line-height: 90px;
|
overflow: inherit;
|
border: 1px dotted rgba(0, 0, 0, 0.1);
|
}
|
.el-upload--picture-card, .el-upload-list--picture-card .el-upload-list__item img{
|
width: 80px;
|
height: 80px;
|
border-radius: 4px;
|
object-fit: cover;
|
|
}
|
.pl100{
|
padding-left: 100px;
|
}
|
.img-box{
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.tips{
|
font-size: 12px;
|
color: #BBBBBB;
|
}
|
</style>
|
