战立标
2 years ago
12 changed files with 437 additions and 92 deletions
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<div class="img-list"> |
|||
<div class="img-item" v-for="(item,index) in list" :key="index"> |
|||
<a class="img-block" :href="item.url" target="_blank"> |
|||
<img class="img" :src="item.url" :alt="item.originFileName"> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "ImageList", |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.img-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 10px; |
|||
.img-item { |
|||
width: 100px; |
|||
flex: 0 0 100px; |
|||
margin-right: 20px; |
|||
margin-bottom: 20px; |
|||
height: 100px; |
|||
overflow: hidden; |
|||
background: #f2f2f2; |
|||
border-radius: 5px; |
|||
|
|||
.img-block { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.img { |
|||
width: 100%; |
|||
/*max-height: 100%;*/ |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,182 @@ |
|||
<template> |
|||
<el-upload :action="uploadUrl" |
|||
:before-upload="beforeImgUpload" |
|||
:data="{ customerId: customerId }" |
|||
:file-list="attachmentList" |
|||
:headers="$getElUploadHeaders()" |
|||
:limit="limit" |
|||
:on-exceed="handleImgExceed" |
|||
:on-preview="handleImgPreview" |
|||
:on-remove="handleImgRemove" |
|||
:on-success="handleImgSuccess" |
|||
:show-file-list="true" |
|||
accept="image/jpg,image/jpeg,image/png" |
|||
class="avatar-uploader" |
|||
list-type="picture-card" |
|||
> |
|||
<i class="el-icon-plus"></i> |
|||
</el-upload> |
|||
<!-- <span style="color: #999"> 点击上传，仅支持图片格式</span>--> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "UploadImages", |
|||
props: { |
|||
limit: { |
|||
type: Number, |
|||
default: 10 |
|||
}, |
|||
fileList: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
watch: { |
|||
fileList(val) { |
|||
console.log(val, 'valvalvalval') |
|||
if (JSON.stringify(val) !== JSON.stringify(this.attachmentList)) { |
|||
this.attachmentList = val || [] |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/upload", |
|||
customerId: localStorage.getItem("customerId"), |
|||
attachmentList: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (JSON.stringify(this.fileList) !== JSON.stringify(this.attachmentList)) { |
|||
this.attachmentList = this.fileList || [] |
|||
} |
|||
}, |
|||
methods: { |
|||
// 上传图片 |
|||
|
|||
|
|||
beforeImgUpload(file) { |
|||
console.log(file); |
|||
const isLt1M = file.size / 1024 / 1024 < 10; |
|||
const srcType = file.type; |
|||
const format = file.name.split(".").pop(); |
|||
|
|||
if (!isLt1M) { |
|||
this.$message.error("上传文件大小不能超过 10MB!"); |
|||
return false; |
|||
} |
|||
if ( |
|||
srcType.indexOf("image") == -1 |
|||
) { |
|||
this.$message.error("仅限图片文件!"); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
|
|||
handleImgSuccess(res, file, fileList) { |
|||
console.log("handleImgSuccess", file); |
|||
if (res.code === 0 && res.msg === "success") { |
|||
let format = file.name.split(".").pop(); |
|||
let srcType = file.raw.type; |
|||
let type = "file"; |
|||
console.log("==============================srcType: ", srcType); |
|||
if (srcType.indexOf("image") != -1) { |
|||
type = "image"; |
|||
} |
|||
console.log(this.attachmentList) |
|||
if (!this.attachmentList) { |
|||
this.attachmentList = [{ |
|||
format, |
|||
originFileName: file.name, |
|||
type, |
|||
url: res.data.url, |
|||
}] |
|||
} else { |
|||
|
|||
this.attachmentList.push({ |
|||
format, |
|||
originFileName: file.name, |
|||
type, |
|||
url: res.data.url, |
|||
}); |
|||
} |
|||
console.log(this.attachmentList) |
|||
this.$emit('change', this.attachmentList.map(item => { |
|||
return { |
|||
originFileName: item.originFileName, |
|||
type: item.type, |
|||
format: item.format, |
|||
url: item.url, |
|||
id: item.id?item.id:'' |
|||
} |
|||
})) |
|||
} else { |
|||
this.$message.error(res.msg); |
|||
} |
|||
}, |
|||
|
|||
handleImgPreview(file) { |
|||
console.log(file); |
|||
window.open(file.url || file.response.data.url); |
|||
}, |
|||
|
|||
handleImgRemove(file) { |
|||
console.log("handleImgRemove", file); |
|||
if (file.response) { |
|||
let index = this.attachmentList.findIndex( |
|||
(item) => item.url == file.response.data.url |
|||
); |
|||
this.attachmentList.splice(index, 1); |
|||
} else if (file.url) { |
|||
let index = this.attachmentList.findIndex( |
|||
(item) => item.url == file.url |
|||
); |
|||
this.attachmentList.splice(index, 1); |
|||
} |
|||
this.$emit('change', this.attachmentList.map(item => { |
|||
return { |
|||
originFileName: item.originFileName, |
|||
type: item.type, |
|||
format: item.format, |
|||
url: item.url, |
|||
id: item.id?item.id:'' |
|||
} |
|||
})) |
|||
}, |
|||
|
|||
handleImgExceed() { |
|||
this.$message({ |
|||
type: "warning", |
|||
message: "文件数量最多不超过" + this.limit + "个", |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/deep/ .el-upload--picture-card { |
|||
line-height: 90px; |
|||
width: 90px; |
|||
height: 90px; |
|||
} |
|||
|
|||
/deep/ .el-upload-list--picture-card .el-upload-list__item { |
|||
line-height: 90px; |
|||
width: 90px; |
|||
height: 90px; |
|||
} |
|||
|
|||
/deep/ .el-upload-list--picture-card .el-upload-list__item-status-label i { |
|||
position: absolute; |
|||
top: 11px; |
|||
left: 15px; |
|||
margin-top: 0; |
|||
} |
|||
|
|||
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail { |
|||
height: auto; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue