You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
3.9 KiB
131 lines
3.9 KiB
<template>
|
|
<div class="upload-image">
|
|
<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)"
|
|
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>
|
|
</span>
|
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
<i class="el-icon-delete"></i>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</el-upload>
|
|
<el-dialog :visible.sync="dialogVisible">
|
|
<img width="100%" :src="dialogImageUrl" alt="">
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
limit: {
|
|
type: Number,
|
|
default: 3
|
|
},
|
|
rowIndex: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
defaultFileList: {
|
|
type: Array
|
|
}
|
|
},
|
|
watch: {
|
|
defaultFileList: {
|
|
handler (newVal) {
|
|
newVal.forEach(item => {
|
|
item.url = item.fileUrl
|
|
})
|
|
this.fileList = newVal
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
|
|
},
|
|
data () {
|
|
return {
|
|
dialogImageUrl: '',
|
|
dialogVisible: false,
|
|
disabled: false,
|
|
uploadUrl: `${window.SITE_CONFIG['apiURL']}/oss/file/uploadqrcodeV2`,
|
|
customerId: localStorage.getItem("customerId"),
|
|
fileList: [],
|
|
imageUrls: []
|
|
}
|
|
},
|
|
created() {
|
|
console.log('xxxxxx', this.rowIndex)
|
|
},
|
|
methods: {
|
|
handleRemove(file) {
|
|
const delFile = file.url
|
|
this.fileList.forEach((item, key) => {
|
|
if (delFile == item.url) {
|
|
this.fileList.splice(key, 1)
|
|
}
|
|
})
|
|
},
|
|
handlePictureCardPreview(file) {
|
|
this.dialogImageUrl = file.url
|
|
this.dialogVisible = true
|
|
},
|
|
beforeImgUpload(file) {
|
|
// console.log(file)
|
|
},
|
|
handleImgExceed(res) {
|
|
console.log(res)
|
|
this.$message({
|
|
type: "warning",
|
|
message: `文件数量最多不超过${this.limit}个`,
|
|
})
|
|
},
|
|
handleImgRemove(file) {
|
|
console.log("handleImgRemove", file)
|
|
},
|
|
handleImgSuccess(res, file) {
|
|
// console.log("handleImgSuccess", res, file)
|
|
if (res.code === 0 && res.msg === "success") {
|
|
this.fileList.push(file)
|
|
this.$emit('change', this.fileList, this.rowIndex)
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
},
|
|
|
|
handleImgError(res, file) {
|
|
console.log(res)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.upload-image {
|
|
// min-width: 120px;
|
|
// height: 80px;
|
|
}
|
|
/deep/ .el-upload--picture-card {
|
|
width: 60px;
|
|
height: 60px;
|
|
line-height: 70px;
|
|
}
|
|
/deep/ .el-upload-list--picture-card .el-upload-list__item {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
</style>
|
|
|