fix:项目初始化
This commit is contained in:
ouyangxiu
@@ -0,0 +1,374 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user