|
|
|
@ -1,29 +1,34 @@ |
|
|
|
<template> |
|
|
|
<div class="upload-image" :class="isDetail? 'isDetail' : ''"> |
|
|
|
<el-upload :headers="$getElUploadHeaders()" list-type="picture-card" |
|
|
|
:action="uploadUrl" |
|
|
|
:data="{ customerId: customerId }" |
|
|
|
:file-list="fileList" |
|
|
|
:limit="limit" |
|
|
|
<div class="upload-image" :class="isDetail ? 'isDetail' : ''"> |
|
|
|
<el-upload :headers="$getElUploadHeaders()" list-type="picture-card" :action="uploadUrl" |
|
|
|
:data="{ customerId: customerId }" :file-list="fileList" :limit="limit" |
|
|
|
:on-success="(res, file) => handleImgSuccess(res, file)" |
|
|
|
:on-error="(res, file) => handleImgError(res, file)" |
|
|
|
:on-remove="(res) => handleImgRemove(res)" |
|
|
|
:on-exceed="(res) => handleImgExceed(res)" |
|
|
|
:before-upload="(file) => beforeImgUpload(file)" |
|
|
|
:on-error="(res, file) => handleImgError(res, file)" :on-remove="(res) => handleImgRemove(res)" |
|
|
|
:on-exceed="(res) => handleImgExceed(res)" :before-upload="(file) => beforeImgUpload(file)" |
|
|
|
accept="image/jpg,image/jpeg,image/png"> |
|
|
|
<i slot="default" class="el-icon-plus"></i> |
|
|
|
<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="handlePictureCardPreview(file)"> |
|
|
|
<i class="el-icon-zoom-in"></i> |
|
|
|
<div slot="file" slot-scope="{file}" style="width: 100%; height: 100%;"> |
|
|
|
<div v-if="file.status !== 'uploading'" style="width: 100%; height: 100%;"> |
|
|
|
<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="handlePictureCardPreview(file)"> |
|
|
|
<i class="el-icon-zoom-in"></i> |
|
|
|
</span> |
|
|
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> |
|
|
|
<i class="el-icon-delete"></i> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> |
|
|
|
<i class="el-icon-delete"></i> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<div v-else class="uploading-container" |
|
|
|
v-loading="true" |
|
|
|
element-loading-spinner="el-icon-loading" |
|
|
|
element-loading-background="rgba(255, 255, 255, 0.8)"> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</el-upload> |
|
|
|
|
|
|
|
<el-dialog :visible.sync="dialogVisible"> |
|
|
|
<img width="100%" :src="dialogImageUrl" alt=""> |
|
|
|
</el-dialog> |
|
|
|
@ -54,17 +59,17 @@ export default { |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
defaultFileList: { |
|
|
|
handler (newVal) { |
|
|
|
handler(newVal) { |
|
|
|
newVal.forEach(item => { |
|
|
|
item.url = item.fileUrl |
|
|
|
item.url = item.response.data.url |
|
|
|
}) |
|
|
|
this.fileList = newVal |
|
|
|
}, |
|
|
|
deep: true, |
|
|
|
immediate: true |
|
|
|
immediate: true |
|
|
|
} |
|
|
|
}, |
|
|
|
data () { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
dialogImageUrl: '', |
|
|
|
dialogVisible: false, |
|
|
|
@ -72,7 +77,7 @@ export default { |
|
|
|
uploadUrl: `${window.SITE_CONFIG['apiURL']}/oss/file/uploadqrcodeV2`, |
|
|
|
customerId: localStorage.getItem("customerId"), |
|
|
|
fileList: [], |
|
|
|
imageUrls: [] |
|
|
|
imageUrls: [], |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@ -94,17 +99,16 @@ export default { |
|
|
|
this.dialogImageUrl = file.url |
|
|
|
this.dialogVisible = true |
|
|
|
} else this.$emit('preview', file) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
beforeImgUpload(file) { |
|
|
|
// console.log(file) |
|
|
|
}, |
|
|
|
handleImgExceed(res) { |
|
|
|
console.log(res) |
|
|
|
this.$message({ |
|
|
|
type: "warning", |
|
|
|
message: `文件数量最多不超过${this.limit}个`, |
|
|
|
type: "warning", |
|
|
|
message: `文件数量最多不超过${this.limit}个`, |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleImgRemove(file) { |
|
|
|
@ -130,16 +134,37 @@ export default { |
|
|
|
// min-width: 120px; |
|
|
|
// height: 80px; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .el-upload--picture-card { |
|
|
|
width: 60px; |
|
|
|
height: 60px; |
|
|
|
line-height: 70px; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .el-icon-plus { |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .el-upload-list--picture-card .el-upload-list__item { |
|
|
|
width: 60px; |
|
|
|
height: 60px; |
|
|
|
} |
|
|
|
|
|
|
|
.isDetail ::v-deep .el-upload--picture-card { |
|
|
|
display: none; |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.uploading-container { |
|
|
|
width: 60px; |
|
|
|
height: 60px; |
|
|
|
border: 1px dashed #c0ccda; |
|
|
|
border-radius: 6px; |
|
|
|
background-color: rgba(255, 255, 255, 0.3); |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|