|
@@ -3,13 +3,16 @@
|
|
<p class="name">{{item.name|| msg}}</p>
|
|
<p class="name">{{item.name|| msg}}</p>
|
|
<div class="box">
|
|
<div class="box">
|
|
<ul class="upload-imgs">
|
|
<ul class="upload-imgs">
|
|
- <li v-if="imgLen>=6 ? false : true">
|
|
|
|
|
|
+ <li v-if="imgLen>=6 ? false : true" class="uploadBox" @click="handleUpload">
|
|
<input type="file" class="upload" @change="addImg" accept="image/*" ref="inp" style="display:none"/>
|
|
<input type="file" class="upload" @change="addImg" accept="image/*" ref="inp" style="display:none"/>
|
|
- <p @click="handleUpload">点击上传</p>
|
|
|
|
|
|
+ <img src="../images/upload.png">
|
|
|
|
+ <p>点击上传</p>
|
|
</li>
|
|
</li>
|
|
<li v-for='(value, key) in imgs'>
|
|
<li v-for='(value, key) in imgs'>
|
|
- <!-- <p class="img"><img :src="getObjectURL(value)"><a class="close" @click="delImg(key)">×</a></p> -->
|
|
|
|
- <p class="img"><img :src="value"><a class="close" @click="delImg(key)">×</a></p>
|
|
|
|
|
|
+ <p class="imgbox">
|
|
|
|
+ <img :src="value" :preview="item.id" class="img" preview-text="">
|
|
|
|
+ </p>
|
|
|
|
+ <a class="close" @click="delImg(key)"></a>
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
@@ -25,20 +28,29 @@
|
|
imgLen:0
|
|
imgLen:0
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- props:['item'],
|
|
|
|
|
|
+ props:['item','moduleType','imgList'],//moduleType-哪个模块下上传的图
|
|
|
|
+ mounted(){
|
|
|
|
+ // 将store存的值赋给imgs
|
|
|
|
+ this.imgs = this.imgList;
|
|
|
|
+ },
|
|
methods:{
|
|
methods:{
|
|
handleUpload(){
|
|
handleUpload(){
|
|
const inp = this.$refs.inp;
|
|
const inp = this.$refs.inp;
|
|
inp.click();
|
|
inp.click();
|
|
},
|
|
},
|
|
delImg(key){
|
|
delImg(key){
|
|
- console.log(2222,key)
|
|
|
|
|
|
+ let obj = this.imgs;
|
|
|
|
+ delete(obj[key]);
|
|
|
|
+ this.imgLen--;
|
|
|
|
+ this.imgs = Object.assign({},obj);
|
|
|
|
+ this.$store.commit('deleImg',{key:key,type:this.moduleType});
|
|
|
|
+ this.$store.commit('deleSrc',{key:key,type:this.moduleType});
|
|
},
|
|
},
|
|
addImg(){
|
|
addImg(){
|
|
// 上传图片进行压缩,压缩后超过4M则不允许上传
|
|
// 上传图片进行压缩,压缩后超过4M则不允许上传
|
|
let fileTag = this.$refs.inp;
|
|
let fileTag = this.$refs.inp;
|
|
let img = this.$refs.img;
|
|
let img = this.$refs.img;
|
|
- let file = fileTag.files[0];console.log("文件信息:",file)
|
|
|
|
|
|
+ let file = fileTag.files[0];
|
|
const that = this;
|
|
const that = this;
|
|
this.imgBase64(file, function (image, canvas) {
|
|
this.imgBase64(file, function (image, canvas) {
|
|
var maxSize = 4*1024; // 4M
|
|
var maxSize = 4*1024; // 4M
|
|
@@ -46,26 +58,26 @@
|
|
var uploadSrc;
|
|
var uploadSrc;
|
|
var uploadFile;
|
|
var uploadFile;
|
|
if(fileSize > maxSize) { // 如果图片大小大于4m,进行压缩
|
|
if(fileSize > maxSize) { // 如果图片大小大于4m,进行压缩
|
|
- console.log(maxSize,fileSize, maxSize/fileSize );
|
|
|
|
|
|
+ // console.log(maxSize,fileSize, maxSize/fileSize );
|
|
uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
|
|
uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
|
|
uploadFile = that.dataURLtoFile(uploadSrc, file.name.split('.')[0]); // 转成file文件
|
|
uploadFile = that.dataURLtoFile(uploadSrc, file.name.split('.')[0]); // 转成file文件
|
|
// uploadFile = that.convertBase64UrlToBlob(uploadSrc); // 转成blob
|
|
// uploadFile = that.convertBase64UrlToBlob(uploadSrc); // 转成blob
|
|
- //console.log("大于:",uploadFile)
|
|
|
|
} else {
|
|
} else {
|
|
uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);
|
|
uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);
|
|
uploadFile = file;
|
|
uploadFile = file;
|
|
}
|
|
}
|
|
|
|
|
|
var compressedSize = uploadFile.size / 1024 / 1024;
|
|
var compressedSize = uploadFile.size / 1024 / 1024;
|
|
- //console.log("压缩后大小:",compressedSize)
|
|
|
|
if(compressedSize.toFixed(2) > 4.00) {
|
|
if(compressedSize.toFixed(2) > 4.00) {
|
|
alert('上传图片不可超过4M');
|
|
alert('上传图片不可超过4M');
|
|
} else {
|
|
} else {
|
|
- // img.setAttribute('src',uploadSrc);
|
|
|
|
- // img.className = 'img';
|
|
|
|
let key = file.name + new Date().getTime();
|
|
let key = file.name + new Date().getTime();
|
|
- this.$set(this.imgs,key,uploadSrc);
|
|
|
|
- this.imgLen++;
|
|
|
|
|
|
+ that.$set(that.imgs,key,uploadSrc);
|
|
|
|
+ that.imgLen++;
|
|
|
|
+ // 将图片信息存到store
|
|
|
|
+ that.$store.commit('setImgFile',{type:that.moduleType,pId:that.item.id,key:key,file:uploadFile})
|
|
|
|
+ that.$store.commit('setImgSrc',{key:key,src:uploadSrc,type:that.moduleType})
|
|
|
|
+ that.$previewRefresh(); //异步获取的图片需要刷新下
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
@@ -99,13 +111,11 @@
|
|
callback(image, canvas);
|
|
callback(image, canvas);
|
|
};
|
|
};
|
|
if (/^image/.test(file.type)) {
|
|
if (/^image/.test(file.type)) {
|
|
- // 创建一个reader
|
|
|
|
var reader = new FileReader();
|
|
var reader = new FileReader();
|
|
// 将图片将转成 base64 格式
|
|
// 将图片将转成 base64 格式
|
|
reader.readAsDataURL(file);
|
|
reader.readAsDataURL(file);
|
|
// 读取成功后的回调
|
|
// 读取成功后的回调
|
|
reader.onload = function () {
|
|
reader.onload = function () {
|
|
- // self.imgUrls.push(this.result);
|
|
|
|
// 设置src属性,浏览器会自动加载。
|
|
// 设置src属性,浏览器会自动加载。
|
|
// 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
|
|
// 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
|
|
image.src = this.result;
|
|
image.src = this.result;
|
|
@@ -149,8 +159,45 @@
|
|
}
|
|
}
|
|
.upload-imgs{
|
|
.upload-imgs{
|
|
margin-bottom: .2rem;
|
|
margin-bottom: .2rem;
|
|
|
|
+ .uploadBox{
|
|
|
|
+ border: 1px solid #DFE0E4;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ text-align: center;
|
|
|
|
+ img{
|
|
|
|
+ width:.6rem;
|
|
|
|
+ margin:.45rem 0 .23rem 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
li{
|
|
li{
|
|
-
|
|
|
|
|
|
+ width:1.86rem;
|
|
|
|
+ height:1.9rem;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ position: relative;
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ border-radius: .08rem;
|
|
|
|
+ margin: 0 0 .3rem .3rem;
|
|
|
|
+ .close{
|
|
|
|
+ width:.54rem;
|
|
|
|
+ height:.54rem;
|
|
|
|
+ background: url(../images/del-pic.png) no-repeat;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: -.27rem;
|
|
|
|
+ right: -.27rem;
|
|
|
|
+ z-index: 3;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ li:nth-child(3n+1){
|
|
|
|
+ margin-left: 0;
|
|
|
|
+ }
|
|
|
|
+ .imgbox{
|
|
|
|
+ width:100%;
|
|
|
|
+ height:100%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ border-radius: .08rem;
|
|
|
|
+ .img{
|
|
|
|
+ width:100%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|