<template>
|
<div>
|
<!-- 上传图片组件(多图) -->
|
<el-upload
|
id="UploadMultipleImg"
|
ref="refUploadImg"
|
:accept="accept"
|
:auto-upload="false"
|
list-type="picture-card"
|
:class="{disabled:uploadDisabled}"
|
action="#"
|
:limit="limit"
|
drag
|
multiple
|
:file-list="uploadImgs"
|
:on-change="addUploadImg"
|
:on-remove="delUploadImg"
|
:http-request="uploadImg"
|
:on-preview="uploadPreview"
|
:on-exceed="exceedUploadImg"
|
:before-upload="beforeUploadImg"
|
size="mini"
|
>
|
<i class="el-icon-plus" />
|
</el-upload>
|
<!-- upload放大图片 -->
|
<el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
|
<img style="max-width:100%" :src="uploadPreviewUrl" alt="">
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
|
export default {
|
mixins: [mixin_upload],
|
model: {
|
prop: 'uploadImgs',
|
event: 'change'
|
},
|
props: {
|
uploadImgs: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
accept: {
|
type: String,
|
default: () => {
|
return 'image/jpeg,image/jpg,image/gif,image/png'
|
}
|
},
|
limit: {
|
type: Number,
|
default: 9
|
}
|
},
|
|
data() {
|
return {
|
callback: null
|
}
|
},
|
computed: {
|
uploadDisabled() {
|
return this.uploadImgs.length >= this.limit
|
}
|
},
|
|
methods: {
|
// 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
// 上传前确认格式
|
beforeUploadImg(file) {
|
const isImg = file.type.indexOf('image/') > -1
|
const isTooLarge = file.size / 1024 / 1024 > 4
|
let flag = true
|
if (!isImg) {
|
this.$message.error('必须是选择图片文件')
|
flag = false
|
} else if (isTooLarge) {
|
this.$message.error('请勿上传大于4MB的图片')
|
flag = false
|
}
|
return flag
|
},
|
// 增加图片
|
addUploadImg(file, fileList) {
|
this.$emit('change', fileList)
|
},
|
// 删除图片
|
delUploadImg(file, fileList) {
|
this.$emit('change', fileList)
|
},
|
// 超出上传数量
|
exceedUploadImg(file, fileList) {
|
this.$messageError(`请勿上传超过${this.limit}张`)
|
},
|
// 执行上传商品图
|
runUploadImg(suc_cb) {
|
console.log('runUploadImg!!!!!')
|
if (this.checkNeedUpload(this.uploadImgs)) {
|
this.callback = suc_cb
|
this.$refs.refUploadImg.submit()
|
} else {
|
suc_cb && suc_cb(this.uploadImgs)
|
}
|
},
|
// 上传商品图
|
uploadImg(res) {
|
console.log(res)
|
const file = res.file
|
const formData = new FormData()
|
formData.append('file', file)
|
console.log(formData)
|
this.postFN({
|
url: 'admin/image/upload?folderCode=IMG',
|
header: { 'Content-Type': 'multipart/form-data' },
|
params: formData,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
imgUrl: 'xxxx'
|
}
|
}
|
}, (inf) => {
|
console.log('上传图片成功')
|
|
// 根据uid 替换掉未上传的图片
|
var uploadImgs = JSON.parse(JSON.stringify(this.uploadImgs))
|
uploadImgs.forEach((o, i) => {
|
if (o.uid === res.file.uid) {
|
uploadImgs[i].url = inf.imgUrl
|
uploadImgs[i].status = 'success'
|
}
|
})
|
|
// 触发change时间激活v-model
|
this.$emit('change', uploadImgs)
|
|
console.log('上传图片结束')
|
|
// 上传结束
|
if (!this.checkNeedUpload(uploadImgs)) {
|
console.log('上传轮播图结束')
|
this.callback && this.callback(uploadImgs)
|
}
|
})
|
}
|
// 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
}
|
}
|
</script>
|
|
<style>
|
.disabled .el-upload--picture-card {
|
display: none;
|
}
|
.el-upload-list--picture-card{
|
line-height: 1;
|
}
|
.el-upload-list--picture-card .el-upload-list__item{
|
margin-bottom: 0
|
}
|
#UploadMultipleImg .el-upload-dragger{
|
width: auto;
|
height: auto;
|
}
|
</style>
|
