<template>
|
<div>
|
<el-upload :action="action" :headers="headers" list-type="picture-card" :accept="accept"
|
:limit="limitNumber" :file-list="fileList" :before-upload="beforeAvatarUpload"
|
:on-preview="handlePictureCardPreview" :on-change="handleChange"
|
:class="{disabled:uploadDisabled,imageSize:imgSize}" :data="{
|
path: uploadPath,
|
bizCode: businessId
|
}" :on-remove="handleRemove" :on-success="handleSuccess" :on-error="handleError">
|
<i class="el-icon-plus"></i>
|
<div slot="tip" v-if="imageSize" class="el-upload__tip" style="color:#909399;">
|
请上传{{imageSize}}尺寸大小的图片</div>
|
</el-upload>
|
<el-dialog :visible.sync="dialogVisible" :append-to-body="isAppendTobody">
|
<img width="100%" :src="dialogImageUrl" alt />
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import {
|
getUuid
|
} from '@/api/sm'
|
import Cookie from 'js-cookie'
|
// 跨域认证信息 header 名
|
const xsrfHeaderName = 'Authorization'
|
export default {
|
props: {
|
limitNumber: {
|
type: Number,
|
default: 5
|
},
|
fileList: {
|
type: Array,
|
default: function() {
|
return []
|
}
|
},
|
isAppendTobody: {
|
type: Boolean,
|
default: false
|
},
|
uploadPath: {
|
type: String,
|
default: 'product'
|
},
|
/**
|
* 设置上传图片的大小(提示)
|
*/
|
imageSize: {
|
type: String,
|
default: null
|
},
|
/**
|
* 是否要隐藏上传图片文件筐
|
*/
|
hideAddUpload: {
|
type: Boolean,
|
default: false
|
},
|
/**
|
* 给图片设置样式(加class)
|
*/
|
imgSize: {
|
type: Boolean,
|
default: false
|
},
|
// 图片接收类型
|
accept: {
|
type: String,
|
default: '.jpg,.jpeg,.png,gif'
|
}
|
},
|
watch: {
|
fileList: {
|
handler: function(newValue, oldValue) {
|
if (newValue.length === this.limitNumber) {
|
this.uploadDisabled = true
|
}
|
},
|
immediate: true
|
}
|
|
},
|
data() {
|
return {
|
action: `${process.env.VUE_APP_CURRENTMODE === 'development' ? '/api/' : process.env.VUE_APP_API_BASE_URL}lbcloud-file/file/upload/file`,
|
headers: {
|
Authorization: 'Bearer ' + Cookie.get(xsrfHeaderName)
|
},
|
dialogVisible: false,
|
dialogImageUrl: null,
|
uploadDisabled: false,
|
businessId: null
|
}
|
},
|
created() {
|
this.businessId = getUuid().split('-').join('')
|
},
|
mounted() {
|
if (this.hideAddUpload) {
|
this.uploadDisabled = this.hideAddUpload
|
}
|
},
|
methods: {
|
handleError(e, file, fileList) {
|
this.$message.error('上传文件失败！请重新上传')
|
this.uploadDisabled = false
|
},
|
/**
|
* 设置上传图片大小
|
*/
|
beforeAvatarUpload(file) {
|
const nameType = file.name.substring(file.name.lastIndexOf('.') + 1)
|
const fileType = this.accept.toLowerCase().includes(nameType.toLowerCase())
|
const imgSize = file.type.includes('image')
|
const videoSize = file.type.includes('video')
|
if (!fileType) {
|
this.$message.error(`上传失败！仅支持${this.accept}格式，请重新上传`)
|
return false
|
}
|
if (imgSize) {
|
const fileSize = file.size / 1024 / 1024 < 5
|
if (!fileSize) {
|
this.$message.error('上传失败！图片大小不能超多 5MB！请重新上传')
|
return false
|
}
|
}
|
if (videoSize) {
|
const fileSize = file.size / 1024 / 1024 < 300
|
if (!fileSize) {
|
this.$message.error('上传失败！视频大小不能超多 300MB！请重新上传')
|
return false
|
}
|
}
|
return true
|
},
|
/**
|
*上传图片
|
*/
|
handleSuccess(res, file) {
|
this.$emit('handle-success', res.data)
|
},
|
/**
|
* 预览
|
*/
|
handlePictureCardPreview(file) {
|
this.dialogImageUrl = file.url
|
this.dialogVisible = true
|
},
|
/**
|
* 限制文件上传个数
|
*/
|
handleChange(file, fileList) {
|
if (fileList.length === this.limitNumber) {
|
this.uploadDisabled = true
|
}
|
},
|
/**
|
* 删除图片
|
*/
|
handleRemove(file, fileList) {
|
this.$emit('handle-remove', file, JSON.parse(JSON.stringify(fileList)))
|
if (fileList.length < this.limitNumber) {
|
this.uploadDisabled = false
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.imageSize {
|
.el-upload--picture-card,
|
.el-upload-list__item {
|
width: 320px;
|
height: 180px;
|
}
|
.el-icon-plus {
|
line-height: 180px;
|
}
|
}
|
.el-form-item__content .el-upload-list__item {
|
max-width: 100%;
|
}
|
</style>
|
