375 lines
9.5 KiB
Vue
375 lines
9.5 KiB
Vue
<template>
|
|
<div>
|
|
<div v-loading="loading" element-loading-text="图片上传中" customClass >
|
|
<div style="display: block;overflow: hidden;max-width: 655px;padding-top: 25px;">
|
|
<draggable v-model="locaImg" class="list-group" tag="ul" v-bind="dragOptions" @start="drag = true"
|
|
@end="drag = false">
|
|
<div v-for="(item, index) in locaImg" :key="index" class="image-list" style="float: left;">
|
|
<img class="el-upload-list__item-thumbnail image-detail" @load="imgLoad(item)" :src="item.imgLocalUrl||domain + item.comicsPic" alt="">
|
|
<!-- 遮罩层 -->
|
|
<a href="#">
|
|
<div class="image-mask">
|
|
<span class="add" @click="handlePictureCardPreview(item.imgLocalUrl||domain + item.comicsPic)">
|
|
<i class="el-icon-view"></i>
|
|
</span>
|
|
<span class="delete" @click="removeImage(index)">
|
|
<i class="el-icon-delete"></i>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
|
<img width="100%" :src="dialogImageUrl" alt="">
|
|
</el-dialog>
|
|
<el-input v-model.number="item.high" placeholder="高" style="width: 70px" />
|
|
<el-input v-model.number="item.width" placeholder="宽" style="width: 70px" />
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
<div style="display: block;overflow: hidden;max-width: 655px;">
|
|
<el-upload action="/api/web/file/uploadImg" ref="upload" :httpRequest="httpRequest" :show-file-list="false"
|
|
:auto-upload="false" list-type="text" :on-preview="handlePictureCardPreview" :on-change="handleChange"
|
|
multiple :limit='10000'>
|
|
<!-- <i class="el-icon-plus"></i> -->
|
|
|
|
<el-button slot="trigger" icon="el-icon-folder-opened" size="small" style="font-weight: bold;" type="primary">选取图片</el-button>
|
|
<el-button size="small" icon="el-icon-delete" style="margin-left: 10px;font-weight: bold;" @click="clearFiles" type="primary">清空选择图片</el-button>
|
|
<el-button size="small" icon="el-icon-delete" style="margin-left: 10px;font-weight: bold;" @click="clearUploadFiles" type="primary">清空上传图片
|
|
</el-button>
|
|
<el-button style="margin-left: 10px;font-weight: bold;" size="small" icon="el-icon-upload" type="primary" @click="submitUpload">上传图片</el-button>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
<div style="display: block;overflow: hidden;width: 655px;margin-top: 45px;">
|
|
<el-table :data="fileList" empty-text="暂无选择图片" :header-row-style="{ 'height': '30px !important' }"
|
|
header-cell-class-name="uploadHeader" height="200" size="mini" style="width: 100%">
|
|
<el-table-column prop="name" :label="`已选择图片(${fileList.length}张)`">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import draggable from 'vuedraggable'
|
|
import axios from 'axios'
|
|
const CancelToken = axios.CancelToken
|
|
export const source = CancelToken.source()
|
|
import { upLoadFile } from '@/api/common'
|
|
|
|
export default {
|
|
components: { draggable },
|
|
data() {
|
|
const source = axios.CancelToken.source()
|
|
return {
|
|
domain: this.$store.getters.getSystemConfig.webImgReq, // 播放视频的域名
|
|
returnURL: [],
|
|
dialogImageUrl: '',
|
|
dialogVisible: false,
|
|
fileList: [],
|
|
drag: false, // 拖拽效果是否开启
|
|
locaImg: [],
|
|
loading: false,
|
|
source
|
|
}
|
|
},
|
|
props: {
|
|
img: {
|
|
type: Array,
|
|
default: function () {
|
|
return []
|
|
},
|
|
},
|
|
},
|
|
computed: {
|
|
dragOptions() {
|
|
return {
|
|
animation: 200,
|
|
group: 'description',
|
|
disabled: false,
|
|
ghostClass: 'ghost',
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
// 监听拖动事件改变时，传出新的图片数组
|
|
drag() {
|
|
this.changeImgUrl()
|
|
},
|
|
img(New, old) {
|
|
this.locaImg = []
|
|
New.filter((item) => {
|
|
this.locaImg.push(item)
|
|
})
|
|
},
|
|
// locaImg: {
|
|
// handler: function (val, oldVal) {
|
|
// if (this.fileList.length !== 0 && val.length === this.fileList.length) {
|
|
// this.setIsUploadIng(false)
|
|
// }
|
|
// },
|
|
// deep: true
|
|
// }
|
|
},
|
|
|
|
mounted() {
|
|
this.locaImg = []
|
|
if (this.img) {
|
|
this.img.filter((item) => {
|
|
this.locaImg.push(item)
|
|
})
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.source.cancel('组件关闭取消所有请求')
|
|
this.source = axios.CancelToken.source()
|
|
},
|
|
methods: {
|
|
handleChange(file, fileList) {
|
|
this.fileList = fileList
|
|
},
|
|
imgLoad(item) {
|
|
// if (item.imgLocalUrl) {
|
|
// URL.revokeObjectURL(item.imgLocalUrl)
|
|
// }
|
|
},
|
|
clearFiles() {
|
|
if (this.$refs.upload && this.$refs.upload.clearFiles) {
|
|
this.$refs.upload.clearFiles()
|
|
}
|
|
this.fileList = []
|
|
},
|
|
clearUploadFiles() {
|
|
this.locaImg = []
|
|
this.changeImgUrl()
|
|
},
|
|
httpRequest() {
|
|
return false
|
|
},
|
|
async upLoad() {
|
|
this.loading = true
|
|
this.setIsUploadIng(true)
|
|
let isUploadFail = false
|
|
const filePathPromises = this.fileList.map(async item => {
|
|
try {
|
|
const fd = new FormData()
|
|
fd.append('file', item.raw)
|
|
fd.append('filename', item.name)
|
|
const response = await upLoadFile(fd, this.source)
|
|
response.data.imgLocalUrl = URL.createObjectURL(item.raw)
|
|
return response.data
|
|
} catch (error) {
|
|
isUploadFail = true
|
|
if (axios.isCancel(error)) {
|
|
console.log('CancelToken canceled', error.message)
|
|
} else {
|
|
this.source.cancel('有任意一个图片上传错误,取消所有请求')
|
|
this.source = axios.CancelToken.source()
|
|
this.$notify.error({
|
|
title: '上传失败',
|
|
message: '请您重新上传图片!',
|
|
duration: 0
|
|
})
|
|
}
|
|
this.loading = false
|
|
this.locaImg = []
|
|
}
|
|
})
|
|
for (const filePathPromise of filePathPromises) {
|
|
try {
|
|
const res = await filePathPromise
|
|
if (res && res.path) {
|
|
this.locaImg.push({
|
|
high: undefined,
|
|
width: undefined,
|
|
comicsPic: res.path,
|
|
imgLocalUrl: res.imgLocalUrl
|
|
})
|
|
} else {
|
|
isUploadFail = true
|
|
throw new Error('locaImg.push阶段错误,请求无返回数据')
|
|
}
|
|
} catch (error) {
|
|
isUploadFail = true
|
|
this.loading = false
|
|
this.locaImg = []
|
|
console.log(error)
|
|
}
|
|
}
|
|
!isUploadFail && this.clearFiles()
|
|
if (isUploadFail) {
|
|
this.locaImg = []
|
|
}
|
|
this.loading = false
|
|
this.setIsUploadIng(false)
|
|
this.changeImgUrl()
|
|
},
|
|
submitUpload() {
|
|
this.upLoad()
|
|
},
|
|
// 移除图片
|
|
removeImage(val) {
|
|
this.locaImg.splice(val, 1)
|
|
this.changeImgUrl()
|
|
},
|
|
// 预览
|
|
handlePictureCardPreview(url) {
|
|
this.dialogImageUrl = url
|
|
this.dialogVisible = true
|
|
},
|
|
changeImgUrl(arr) {
|
|
this.$emit('changeImgUrl', this.locaImg)
|
|
},
|
|
setIsUploadIng(status) {
|
|
this.$emit('setIsUploadIng', status)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.list-group {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409eff;
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 148px;
|
|
height: 148px;
|
|
line-height: 148px;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 148px;
|
|
height: 148px;
|
|
display: block;
|
|
}
|
|
|
|
.image-list {
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
border: 1px solid #c0ccda;
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
width: 148px;
|
|
height: 202px;
|
|
margin: 0 8px 8px 0;
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 148px;
|
|
height: 148px;
|
|
}
|
|
}
|
|
|
|
.image-list a:hover .image-mask {
|
|
opacity: 1;
|
|
}
|
|
|
|
.el-icon-check {
|
|
color: #fff;
|
|
}
|
|
|
|
.input-box {
|
|
width: 80%;
|
|
}
|
|
|
|
.el-upload--picture-card {
|
|
background-color: #fbfdff;
|
|
border: 1px dashed #c0ccda;
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
width: 148px;
|
|
height: 148px;
|
|
line-height: 146px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.image-mask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
cursor: default;
|
|
text-align: center;
|
|
color: #fff;
|
|
opacity: 0;
|
|
font-size: 20px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
transition: opacity 0.3s;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.image-detail {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.image-mask::after {
|
|
display: inline-block;
|
|
content: '';
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.image-mask span {
|
|
display: block;
|
|
cursor: pointer;
|
|
margin: 40% auto;
|
|
}
|
|
|
|
.image-mask .el-upload-list__item-delete {
|
|
position: static;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.add {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.delete {
|
|
padding-right: 20px;
|
|
}
|
|
|
|
// .el-icon-delete {
|
|
// z-index: 9999999;
|
|
// position: absolute;
|
|
// bottom: 70px;
|
|
// right: 10px;
|
|
// color: red;
|
|
// }
|
|
// .el-table .uploadHeader{
|
|
// background-color: #d9d9d9 !important;
|
|
// }
|
|
</style>
|
|
<style lang="scss" >
|
|
.el-table .uploadHeader {
|
|
background-color: #666 !important;
|
|
padding: 0;
|
|
}
|
|
|
|
.el-table .uploadHeader+th {
|
|
padding: 0;
|
|
background-color: #666 !important;
|
|
border-bottom: 1px solid #dfdfdf !important;
|
|
}
|
|
</style>
|