先看看效果图是不是你想要的。
具体方法如下：
<!-- 图片 -->
<div class="seller-addGoods-imgUpload">
<el-form-item ref="photoVos" label="图片:" prop="photoVos" style="display: flex; align-items: center">
<el-checkbox-group v-model="addGoodsForm.photoVos"></el-checkbox-group>
<el-upload
id="upload1"
class="logo-uploader"
:action="uploadPic"
:headers="headers"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-success="
(response, file, fileList) => {
return handleSuccess(response, file, fileList)
}
"
:on-remove="
(file, filelist) => {
return handleRemove(file, filelist)
}
"
:before-upload="beforeAvatarUpload"
:file-list="addGoodsForm.photoVos"
:on-exceed="handleExceed"
:limit="10"
>
<i class="el-icon-plus avatar-uploader-icon"></i>
<div slot="tip" class="el-upload__tip">建议尺寸：700*800像素，图片大小不超过3M，最多上传10张</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</el-form-item>
</div>style的相关样式。
.seller-addGoods-imgUpload {
.el-form-item__label {
margin-top: -60px;
}
.el-form-item__content {
margin-left: 0 !important;
}
}
data() {
return {
uploadPic: config.uploadGoods, // 上传图片地址
dialogImageUrl: '',
dialogVisible: false, // 图片弹窗
addGoodsForm: {
photoVos: [], // 图片
},
rules: {
photoVos: [{ required: true, trigger: ['blur', 'change'], validator: validateUploadFile }],
},
}
}
methods: {
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleRemove(file, fileList) {
for (let i = 0; i < this.addGoodsForm.photoVos.length; i++) {
if (file.url === this.addGoodsForm.photoVos[i].url) {
this.addGoodsForm.photoVos.splice(i, 1)
}
}
// this.imgNumLimit(6)
},
handleSuccess(response, file, fileList) {
// console.log('handleSuccess --- ',file.name,file.size)
if (response.code === 200) {
this.addGoodsForm.photoVos.push({
url: config.BaseImgUrl + response.data
})
// this.imgNumLimit(6)
} else {
this.$message({
message: '上传失败,稍后再试',
type: 'error'
})
}
},
handleExceed(files, fileList) {
this.$message.warning('当前限制上传10张图片')
},
getFileNameType(filePath) {
// 根据文件名称获取文件格式
const startIndex = filePath.lastIndexOf('.')
if (startIndex !== -1) return filePath.substring(startIndex + 1, filePath.length).toLowerCase()
else return ''
},
beforeAvatarUpload(file) {
const isLt3M = file.size / 1024 / 1024 < 3
if (!isLt3M) {
this.$message.error('上传图片大小不能超过3M!')
return false
}
const fileArr = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp']
const isPhoto = fileArr.includes(file.type)
const fileFormatArr = ['jpg', 'jpeg', 'png', 'bmp', 'gif']
const isFormatPhoto = fileFormatArr.includes(this.getFileNameType(file.name))
if (!isPhoto || !isFormatPhoto) {
this.$message.error('图片支持以下格式：jpg、jpeg、png、bmp、gif。')
return false
}
},
// 删除base图片路径
replaceBaseUrl(param) {
// 提交前处理
for (let i = 0, photoList = param.photoVos; i < photoList.length; i++) {
photoList[i] = { url: photoList[i].url.split(config.BaseImgUrl)[1] }
}
for (let i = 0, photoList = param.picUrl; i < photoList.length; i++) {
photoList[i] = photoList[i].split(config.BaseImgUrl)[1]
}
},
addBaseUrl(data) {
// 初始化处理
for (let i = 0, photoList = data.photoVos; i < photoList.length; i++) {
photoList[i] = { url: config.BaseImgUrl + photoList[i].url }
}
},
// 提交
submitForm(status = null) {
// 图片值
param.picUrl = []
this.addGoodsForm.photoVos.map(v=> {
param.picUrl.push(v.url)
})
this.$refs.addGoodsForm.validate((valid, obj) => {
if (valid) {
this.replaceBaseUrl(param) // 去掉图片路径，ip地址
this.postData(param) // 调取接口的方法
}
})
},
}