<el-form-item label="背景图片：" label-width="90px" :v-model="datas">
<el-upload
v-if="aaa === true"
class="avatar-uploader"
action="https://"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-success="handleMasterPictureSuccess"
:before-upload="beforeMasterPictureUpload"
:on-change = "onChangeMaster"
:on-exceed="OnExceed"
:file-list="fileList"
:limit="1"
:on-remove="handleRemove"
>
<el-dialog :visible.sync="dialogVisible">
<!-- <img :src="dialogImageUrl" :style="bannerCur=='1'?'width:100px':(bannerCur=='2'?'width:200px':'')"> -->
</el-dialog>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<span v-else><img :src="datas.linkman" alt="" class="icon"></span>
<span class="uploaderimg-tip">规格：{{bannerType[bannerCur].size}}</span>
</el-form-item>
The above is a style tag
Here is the deal needs to be done
// 主图上传成功 ，此方法比 beforeMasterPictureUpload 方法更快，更早执行所以可以去除此方法
handleMasterPictureSuccess(res, file) {
this.dialogImageUrl = URL.createObjectURL(file.raw);
},
// 图片触发
onChangeMaster(file, fileList){
let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
if (existFile) {
this.$utils.commonUtils.tip('当前文件已经存在!','error')
fileList.pop()
}
this.fileList = fileList
},
// 主图上传之前
beforeMasterPictureUpload(file) {
// console.log(file)
let param = new FormData(); //创建form对象
this.fileList.forEach(file => {
param.append('files', file.raw, file.raw.name); //此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上
})
let config = { //添加请求头
headers:{'Content-Type':'multipart/form-data'}
};
// this.$api.generalize.uploading(param,config).then( res => {
// const {data} = res;
// this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
// })
const isJPG = file.type === 'image/jpeg';
const isGIF = file.type === 'image/gif';
const isPNG = file.type === 'image/png';
const isBMP = file.type === 'image/bmp';
const isname = new RegExp("[\u4E00-\u9FA5]+");
if (isname.test(file.name)) {
this.$message.error(this.$t('Sellerbanner.Sellerbanner.beChinese'));
return false
}
let _this = this
if (file.type.indexOf('image')<0) {
this.$message.error(this.$t('Sellerbanner.Sellerbanner.isincorrect'));
return false
}
if (!isJPG && !isGIF && !isPNG && !isBMP) {
this.$message.error(this.$t('Sellerbanner.Sellerbanner.Uploadingimages'));
}
let a = this.bannerCur;
switch(a){
case '1':
{
if (this.bannerCur === '1') {
this.isLt2M = file.size / 750 / 530 < 2;
const isSize = new Promise(function(resolve, reject) {
let width = 750;
let height = 530;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
this.$api.generalize.uploading(param,config).then( res => {
if(res.errorCode == '100200') {
const {data} = res;
this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
if (this.dialogImageUrl) {
this.$message({
message: '上传成功',
type: 'success'
});
}else{
this.$message({
message: '上传失败',
type: 'success'
});
}
}else{
this.$message({
message: '上传失败',
type: 'success'
});
}
// const {data} = res;
// this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
})
return file;
}, () => {
this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed'));
return Promise.reject();
});
return isSize
}
}
break;
case '2':
{
if (this.bannerCur === '2') {
this.isLt2M = file.size / 220 / 170 < 2;
const isSize = new Promise(function(resolve, reject) {
let width = 220;
let height = 170;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
this.$api.generalize.uploading(param,config).then( res => {
if(res.errorCode == '100200') {
const {data} = res;
this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
if (this.dialogImageUrl) {
this.$message({
message: '上传成功',
type: 'success'
});
}else{
this.$message({
message: '上传失败',
type: 'success'
});
}
}else{
this.$message({
message: '上传失败',
type: 'success'
});
}
})
return file;
}, () => {
this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed1'));
return Promise.reject();
});
return isSize
}
}
break;
case '3':
{
if (this.bannerCur === '3') {
this.isLt2M = file.size / 1180 / 140 < 2;
const isSize = new Promise(function(resolve, reject) {
let width = 1180;
let height = 140;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
this.$api.generalize.uploading(param,config).then( res => {
if(res.errorCode == '100200') {
const {data} = res;
this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
if (this.dialogImageUrl) {
this.$message({
message: '上传成功',
type: 'success'
});
}else{
this.$message({
message: '上传失败',
type: 'success'
});
}
}else{
this.$message({
message: '上传失败',
type: 'success'
});
}
})
return file;
}, () => {
this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed2'));
return Promise.reject();
});
return isSize
}
}
break;
case '4':
{
if (this.bannerCur === '4') {
this.isLt2M = file.size / 1190 / 240 < 2;
const isSize = new Promise(function(resolve, reject) {
let width = 1190;
let height = 240;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = true || img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
this.$api.generalize.uploading(param,config).then( res => {
if(res.errorCode == '100200') {
const {data} = res;
this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
if (this.dialogImageUrl) {
this.$message({
message: '上传成功',
type: 'success'
});
}else{
this.$message({
message: '上传失败',
type: 'success'
});
}
}else{
this.$message({
message: '上传失败',
type: 'success'
});
}
})
return file;
}, () => {
this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed3'));
return Promise.reject();
});
return isSize
}
}
break;
case '5':
{
if (this.bannerCur === '5') {
this.isLt2M = file.size / 400 / 638 < 2;
const isSize = new Promise(function(resolve, reject) {
let width = 400;
let height = 638;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
this.$api.generalize.uploading(param,config).then( res => {
if(res.errorCode == '100200') {
const {data} = res;
this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
if (this.dialogImageUrl) {
this.$message({
message: '上传成功',
type: 'success'
});
}else{
this.$message({
message: '上传失败',
type: 'success'
});
}
}else{
this.$message({
message: '上传失败',
type: 'success'
});
}
})
return file;
}, () => {
this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed4'));
return Promise.reject();
});
return isSize
}
}
break;
}
return (isJPG || isBMP || isGIF || isPNG) && this.isLt2M;
},
// 图片个数超出限制
OnExceed(file, fileList) {
this.$utils.commonUtils.tip('最多只能上传1张图片!','error')
},
//删除图片
handleRemove(file, fileList) {
console.log(file, fileList);
let config = { //添加请求头
headers:{'Content-Type':'application/json;charset=utf-8'}
};
let result = []
const that = this;
result.push(file.url)
this.$api.generalize.deleteFileList(result,config).then( res => {
if(res.errorCode == '100200'){
this.fileList.forEach( (v,index) => {
if(v.url == file.url) {
that.fileList.splice(index,1);
}
})
let resultA = []
that.fileList.forEach( val => {
resultA.push(val.url)
})
that.dialogImageUrl = resultA.join('|')
}
// console.log(res,'res删除图片')
})
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}