提交 89397ecc authored 作者: 王天霸's avatar 王天霸

Merge branch '上传图片修改'

......@@ -46,7 +46,7 @@
action="#"
list-type="picture-card"
:http-request="uploadLogoImgs"
:limit="2"
:limit="1"
:on-exceed="showTip"
:before-upload = "beforeUpLogoImg"
:on-preview="handlePictureCardPreview"
......@@ -87,6 +87,7 @@
<el-upload
class="uploadData"
action="#"
:limit="1"
list-type="picture-card"
:http-request="uploadFactoryImgs"
:before-upload = "beforeUpImg"
......@@ -127,7 +128,7 @@
action="#"
:http-request="uploadShopImgs"
list-type="picture-card"
:limit="2"
:limit="1"
:on-exceed="showTip"
:before-upload = "beforeUpImg"
:on-preview="handlePictureCardPreview3"
......@@ -300,7 +301,7 @@
methods: {
// 上传图片格式和大小限制2kb
beforeUpImg(file) {
let isImgSize = (file.size / 1024 /1024) > 2;
let isImgSize = (file.size / 1024 ) > 500;
if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
this.$message({
message: '上传图片格式只支持jpg/png格式',
......@@ -310,7 +311,7 @@
}
if(isImgSize) {
this.$message({
message: '上传图片大小不能超过2M',
message: '上传图片大小不能超过500k',
type: "warning"
});
return false;
......@@ -339,7 +340,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img};
let data = {"img_data": this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if (res.code == 1) {
this.brandImgFileList.push({'url': res.data.image_url});
......@@ -357,7 +358,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data":this.Base64img};
let data = {"img_data":this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if(res.code == 1){
this.shopImgFileList.push({'url':res.data.image_url});
......@@ -374,7 +375,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data":this.Base64img};
let data = {"img_data":this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if (res.code == 1){
this.factoryImgFileList.push({'url':res.data.image_url});
......
......@@ -44,7 +44,7 @@
<i class="el-icon-warning h-warning"></i>
</span>
</div>
<div style="width:380px;line-height: 24px;padding-top: 6px;">
<div style="width:400px;line-height: 24px;padding-top: 6px;">
<span class="tips-text">图片大小为500KB以内,支持png/jpg,限一张,请确保图片清晰</span></br>
<span class="tips-text">请确保营业执照在有效期内</span>
</div>
......@@ -361,6 +361,7 @@
/** 上传 图片大小和格式校验 */
beforeUpImg(file) {
// let isImgSize = (file.size / 1024 / 100) > 5;
let isImgSize = (file.size / 1024 ) > 500;
if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
this.$message({
message: '上传图片格式只支持png/png格式',
......@@ -368,20 +369,20 @@
});
return false;
}
// if(isImgSize) {
// this.$message({
// message: '上传图片大小不能超过500k',
// type: "warning"
// });
// return false;
// }
if(isImgSize) {
this.$message({
message: '上传图片大小不能超过500k',
type: "warning"
});
return false;
}
},
/** 上传 营业执照图片 */
uploadLicenseImages(param) {
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data":this.Base64img};
let data = {"img_data":this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if( res.code == 1){
this.licenseImgFileList.push({'url':res.data.image_url});
......@@ -456,7 +457,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data":this.Base64img};
let data = {"img_data":this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if (res.code == 1){
this.idcardImgFileList.push({'url':res.data.image_url});
......@@ -526,7 +527,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data":this.Base64img};
let data = {"img_data":this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if (res.code == 1){
this.idcardBackImgFileList.push({'url':res.data.image_url});
......@@ -794,6 +795,11 @@
}
}
</script>
<style scoped>
.main-con /deep/ .uploadData .el-upload-list--picture-card .el-upload-list__item{
line-height: 20px !important;
}
</style>
<style lang="scss" type="text/stylus" scoped>
.fill-store-inf {
......
......@@ -101,8 +101,15 @@
<input type="file" style="display: none;" :ref=" 'hxz' + index " accept="image/*"
@change="changeIMG(index,item)">
</div>
<!--*** 方法二 end ***-->
</div>
<div style="width:680px;line-height: 24px;padding-top: 6px;">
<span class="tips-text">
<i class="el-icon-warning h-warning"></i>
</span>
<span class="tips-text">图片大小在500KB以内,支持png/jpg,每个上传位置仅限一张,请确保图片清晰</span>
</div>
</el-form-item>
<el-form-item class="confirm-btn">
......@@ -308,7 +315,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data":this.Base64img};
let data = {"img_data":this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if(res.code == 1){
this.logoImgFileList.push({'url':res.data.image_url});
......@@ -502,16 +509,15 @@
let curItem = item;
let inputDom = "hxz" + index;
let file = this.$refs[inputDom][0].files[0];
if( file.size > 1024 * 1024 * 3 ) {
this.$message({ type: 'error',message: '规格图片不能大于 3 M'});
if( file.size > 1024 * 500 ) {
this.$message({ type: 'error',message: '规格图片不能大于 500k'});
return;
}
this.getBase64(file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img}
let data = {"img_data": this.Base64img,"type":2}
upLoadImg(data).then(res => {
// this.loading = false;
if (res && res.code == 1) {
......@@ -562,7 +568,11 @@
} // methods end
}
</script>
<style scoped>
.main-con /deep/ .uploadData .el-upload-list--picture-card .el-upload-list__item{
line-height: 20px !important;
}
</style>
<style lang="scss" type="text/stylus" scoped>
.fill-store-inf {
font-size : 16px;
......
......@@ -647,10 +647,10 @@
});
return false;
}
let isImgSize = (file.size / 1024 / 1024) > 2;
let isImgSize = (file.size / 1024 ) > 500;
if (isImgSize) {
this.$message({
message: '上传图片大小不能超过2MB',
message: '上传图片大小不能超过500k',
type: "warning"
});
return false;
......@@ -696,7 +696,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img}
let data = {"img_data": this.Base64img,"type":2}
UploadImg(data).then(res => {
if (res && res.code == 1) {
this.ruleFormdialogLogo.push({url: res.data.image_url})
......
......@@ -341,7 +341,7 @@
this.getBase64(param.file).then( res => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data":this.Base64img};
let data = {"img_data":this.Base64img,"type":2};
this.invoiceImgBase64List = [] // 初始化
upLoadImg(data).then( res=> {
let urlObj = {'url': ''};
......
......@@ -121,6 +121,21 @@
fileChange() {
const list = this.$refs.file.files;
this.indexall = list.length
if (list.type !== "image/png" && list.type !== "image/jpg" && list.type != "image/jpeg") {
this.$message({
message: '上传图片格式只支持png/png格式',
type: "warning"
});
return false;
}
let isImgSize = (list.size / 1024 ) > 500;
if (isImgSize) {
this.$message({
message: '上传图片大小不能超过500k',
type: "warning"
});
return false;
}
this.uploadImgs()
},
// 向后台 传输 base64的图片数据
......
......@@ -26,21 +26,38 @@ export default {
const editor = new E("#wangeditor");
editor.config.height = 500;
editor.config.uploadImgShowBase64 = true;
editor.config.uploadImgMaxSize = 20 * 1024 * 1024
editor.config.showLinkImg = false;
// editor.config.uploadImgMaxLength = 1
editor.config.customUploadImg = function (files, insertImgFn) {
if (files[0].type !== "image/png" && files[0].type !== "image/jpg" && files[0].type != "image/jpeg") {
that.$message({
message: '上传图片格式只支持png/jpg格式',
type: "warning"
});
return false;
}
let isImgSize = (files[0].size / 1024 /1024) > 5;
if (isImgSize) {
that.$message({
message: '上传图片大小不能超过5M',
type: "warning"
});
return false;
}
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
// 上传图片,返回结果,将图片插入到编辑器中
that.getAllImg(files).then((res) => {
let data = { data: [] };
let data = { data: [],type:3 };
let imgBase = "";
if (res.length > 0) {
for (let i = 0; i < res.length; i++) {
imgBase = "";
imgBase = res[i].split(",")[1];
if (imgBase) {
data.data.push({ img_data: imgBase });
data.data.push({ img_data: imgBase});
}
}
......
......@@ -71,8 +71,8 @@
<el-form-item label="商品图片:" prop="imgs">
<span class="tip-span" style="display: block;line-height: 34px;">
<i style="margin: 10px;">{{ goodsImgFileList.length }} / 7</i>
商品图片最多上传7张,默认第一张为主图
<span style="margin-left: 10px;">主图要求为白底,建议尺寸要求为800*800px,拖拽图片可进行排序</span>
商品图片最多上传7张,默认第一张为主图
<span style="margin-left: 20px;">主图要求为白底,尺寸要求为800*800px及以上,拖拽图片可进行排序</span>
</span>
<draggable :list="goodsImgFileList" group="article" class="dragArea" @end="handchange($event)">
<div v-for="(element,index) in goodsImgFileList" :key="index" class="list-complete-item"
......@@ -791,7 +791,7 @@
// 图片是否是正方形 宽高比为 1
file.width = img.width;
file.height = img.height;
let valid = (img.width === 800) && (img.height === 800);
let valid = (img.width >= 800) && (img.height >= 800);
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
......@@ -799,7 +799,7 @@
return file;
}, () => {
this.$message({
message: '商品图片尺寸必须为800 * 800像素,请重新选择!',
message: '商品图片尺寸为800 * 800px及以上,请重新选择! !',
type: 'warning'
});
return Promise.reject();
......@@ -811,7 +811,7 @@
this.getBase64(param.file).then(res => {
let result = res.split(",");
this.Base64img = result[1];
let data = { "img_data": this.Base64img };
let data = { "img_data": this.Base64img,type:1 };
UploadImg(data).then(res => {
let urlObj = { 'url': '' };
if (res.data) {
......
......@@ -575,14 +575,14 @@ export default {
let curRow = row;
let file = this.$refs.guideupimg.files[0];
if( file.size > 1024 * 1024 * 3 ) {
this.$message({ type: 'error',message: '规格图片不能大于 3 M'});
if( file.size > 1024 * 1024 * 2 ) {
this.$message({ type: 'error',message: '规格图片不能大于 2 M'});
return;
}
this.getBase64(file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img}
let data = {"img_data": this.Base64img,type:2}
UploadImg(data).then(res => {
// this.loading = false;
if (res && res.code == 1) {
......
......@@ -85,7 +85,7 @@
<!-- 新增/修改/详情 -->
<el-dialog :title="brandTitle" v-if="isOpen" :visible.sync="isOpen" width="70%" class="brandInf-add" center
:close-on-click-modal="false" :before-close="handleCancel">
<el-form :model="brandForm" :rules="brandRules" ref="brandForm" label-width="140px">
<el-form :model="brandForm" :rules="brandRules" class="brandForm" ref="brandForm" label-width="140px">
<el-row v-if="indexBrandId != 0 && brandForm.status != 3">
<p class="brand-status-con">
<span v-if="brandForm.status == 1" class="color-spe-success"><i class="el-icon-success"></i></span>
......@@ -251,6 +251,7 @@
<el-upload
class="uploadData"
action="#"
:limit="1"
list-type="picture-card"
:http-request="uploadFactoryImgs"
:before-upload="UpImgSizeTwoMb"
......@@ -286,6 +287,7 @@
<el-upload
class="uploadData"
action="#"
:limit="1"
:http-request="uploadShopImgs"
list-type="picture-card"
:before-upload="UpImgSizeTwoMb"
......@@ -889,7 +891,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img};
let data = {"img_data": this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if (res && res.code === 1) {
this.brandImgFileList.push({'url': res.data.image_url});
......@@ -936,7 +938,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img};
let data = {"img_data": this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if (res && res.code === 1) {
this.certImgFileList.push({'url': res.data.image_url});
......@@ -967,7 +969,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data":this.Base64img};
let data = {"img_data":this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if(res && res.code === 1){
this.factoryImgFileList.push({'url':res.data.image_url});
......@@ -986,10 +988,10 @@
});
return false;
}
let isImgSize = (file.size / 1024 /1024) > 2;
let isImgSize = (file.size / 1024 ) > 500;
if(isImgSize) {
this.$message({
message: '上传图片大小不能超过2M',
message: '上传图片大小不能超过500k',
type: "warning"
});
return false;
......@@ -1013,7 +1015,7 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data":this.Base64img};
let data = {"img_data":this.Base64img,"type":2};
upLoadImg(data).then((res) => {
if(res && res.code === 1){
this.shopImgFileList.push({'url':res.data.image_url});
......@@ -1039,7 +1041,11 @@
} // methods end
}
</script>
<style scoped>
.brandForm /deep/ .uploadData .el-upload-list--picture-card .el-upload-list__item{
line-height: 20px !important;
}
</style>
<style lang="scss" type="text/stylus" scoped>
.brandInf-add {
/deep/.el-dialog {
......
......@@ -240,6 +240,7 @@
<div class="single-title">{{ authTitleFormatter(item.content) }}</div>
</div>
</div>
</el-form-item>
</el-form>
......@@ -250,7 +251,7 @@
<!--编辑-->
<el-dialog title="编辑店铺信息" :visible.sync="isOpen" width="65%" class="shopinf-edit"
center :destroy-on-close="true" :close-on-click-modal="false" :before-close="handleCancel">
<el-form v-if="isOpen" ref="editForm" :model="editForm" :rules="editRules" label-width="180px" size="small">
<el-form v-if="isOpen" ref="editForm" class="editForm" :model="editForm" :rules="editRules" label-width="180px" size="small">
<el-form-item label="电商平台经验:" prop="is_business_experience">
<el-radio-group v-model="editForm.is_business_experience">
......@@ -336,6 +337,13 @@
<input type="file" style="display: none;" :ref=" 'hxz' + index " accept="image/*"
@change="changeIMG(index,item)">
</div>
</div>
<div style="width:680px;line-height: 24px;padding-top: 6px;">
<span class="tips-text">
<i class="el-icon-warning h-warning"></i>
</span>
<span class="tips-text">图片大小在500KB以内,支持png/jpg,每个上传位置仅限一张,请确保图片清晰</span>
</div>
</el-form-item>
......@@ -368,9 +376,9 @@
name: "Shop",
data() {
let logoValidator = (rule, value, callback) => {
if (this.logoImgFileList.length > 0) {
if (this.editLogoImgFileList.length > 0) {
callback();
} else if (this.logoImgFileList.length === 0) {
} else if (this.editLogoImgFileList.length === 0) {
callback(new Error("店铺logo图片至少上传一张"));
}
};
......@@ -602,6 +610,7 @@
// 店铺logo回显处理
let logoImgArr = [];
let logoImgUrl = {};
this.logoImgFileList = []
logoImgArr = this.storeForm.shop_logo.split(",");
if (logoImgArr.length > 0) {
logoImgArr.forEach(item => {
......@@ -645,6 +654,7 @@
// 店铺logo回显处理
let logoImgArr = [];
let logoImgUrl = {};
this.editLogoImgFileList = []
logoImgArr = this.editForm.shop_logo.split(",");
if (logoImgArr.length > 0) {
logoImgArr.forEach(item=> {
......@@ -699,6 +709,7 @@
data['emergency_tel'] = this.editForm.emergency_tel;
data['scope'] = this.editForm.scope.join(',');
// 编辑 的店铺logolist
debugger
if(this.editLogoImgFileList.length > 0) {
for(let i = 0; i < this.editLogoImgFileList.length; i++) {
if(i === 0) {
......@@ -779,10 +790,12 @@
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img};
let data = {"img_data": this.Base64img,"type":2};
this.editLogoImgFileList = []
upLoadImg(data).then((res) => {
if (res && res.code == 1) {
this.logoImgFileList.push({'url': res.data.image_url});
this.editLogoImgFileList.push({'url': res.data.image_url});
debugger
this.$message({message: '上传成功', type: 'success'});
this.$refs.storeForm.clearValidate('shop_logo');
}
......@@ -814,15 +827,15 @@
let inputDom = "hxz" + index;
let file = this.$refs[inputDom][0].files[0];
if( file.size > 1024 * 1024 * 3 ) {
this.$message({ type: 'error',message: '规格图片不能大于 3 M'});
if( file.size > 1024 * 500 ) {
this.$message({ type: 'error',message: '规格图片不能大于 500k'});
return;
}
this.getBase64(file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img}
let data = {"img_data": this.Base64img,"type":2}
upLoadImg(data).then(res => {
if (res && res.code == 1) {
curItem.url = res.data.image_url;
......@@ -929,7 +942,14 @@
}
}
</script>
<style scoped>
.box-card /deep/ .uploadData .el-upload-list--picture-card .el-upload-list__item{
line-height: 20px !important;
}
.editForm /deep/ .uploadData .el-upload-list--picture-card .el-upload-list__item{
line-height: 20px !important;
}
</style>
<style lang="scss" type="text/stylus" scoped>
.shopinf-edit {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论