做电商的时候，难免会有订单评价功能，怎样实现多图片的压缩并实现上传。类似这种评价
直接上完整的代码吧。可以慢慢分析，其实也很简单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>订单评价</title>
</head>
<style type="text/css">
.assess_starts{
display: flex;
flex-direction: row;
align-items: center;
padding: 15px;
border-bottom: solid 0.5px #EBEDF0;
}
#start_img{
width: 50px;
height: 50px;
object-fit: cover;
}
#span{
margin-left: 8px;
margin-right: 8px;
font-size: inherit;
}
.van-rate{
margin-right: 8px;
margin-top: 5px;
}
#start_rate{
color: rgba(0,0,0,0.5);
}
.assess_content{
padding-bottom: 20px;
border-bottom: solid 0.5px #ebedf0;
}
.textarea{
width: 100%;
height: 100%;
border: none;
padding: 5px 0 0 0;
}
.assess_photo{
width: 80px;
height: 80px;
border: dashed 1px #cdcdcd;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15px;
}
.assess_photo img{
width: 30px;
height: auto;
}
#photo_span{
color: #CDCDCD;
margin-top: 10px;
}
.assess_button{
display: flex;
align-items: center;
justify-content: center;
margin-top: 70px;
}
.button{
text-align: center;
line-height: 40px;
width: 80%;
height: 40px;
color: #FFFFFF;
font-size: 1.3rem;
letter-spacing: 5px;
background-color: #27A3DF;
border-radius: 10px;
}
.button:active{
background-color:rgba(39, 163, 223 ,0.8) ;
}
.van-cell:not(:last-child)::after{
border-bottom: none;
}
.add_photo{
padding-left: 15px;
padding-right: 15px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
#preview{
width: 80px;
height: 80px;
object-fit: cover;
}
.show_photo{
margin-right: 15px;
position: relative;
margin-top: 15px;
}
#remove{
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
}
</style>
<body>
<div class="orderAssessment">
<div class="assess_starts">
<img :src="src" id="start_img"/>
<span id="span">描叙相符</span>
<van-rate
v-model="value"
:size="24"
color="#f44"
void-icon="star"
void-color="#eee"
></van-rate>
<span id="start_rate">
{{rate}}
</span>
</div>
<div class="assess_content">
<van-field
v-model="message"
maxlength="500"
type="textarea"
:placeholder="placeholder"
rows="1"
autosize
></van-field>
<div class="add_photo">
<div class="show_photo" v-for="(item,index) in imgUrls" v-show="imgUrls.length>0">
<img :src="item" id="preview" @click="bigImg(index)"/>
<img src="img/remove.png" @click="remove(index)" id="remove"/>
</div>
<!--//点击放大组件-->
<van-image-preview
v-model="show"
:images="imgUrls"
:start-position="startIndex"
@change="onChange"
>
</van-image-preview>
<!--//上传文件-->
<div class="assess_photo" @click="getPhoto" v-show="imgUrls.length<6">
<input type="file" id="upfile" accept="image/*" multiple style="display: none;" @change="changeImage($event)"/>
<img src="img/addPhoto.png"/>
<span id="photo_span">
{{addPhoto}}
</span>
</div>
</div>
</div>
<div class="assess_button">
<div class="button" @click="button">提交评价</div>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'.orderAssessment',
data:{
src:"img/c.jpg",
value:5,
rate:"非常好",
placeholder:"宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧",
message:"",
addPhoto:"添加照片",
photos:[],
imgUrls:[],
maxImg:6,
leftImgs:0,
show:false,
startIndex:0
},
watch:{
value(){
if (this.value == 5) {
this.rate = "非常好"
}else if (this.value == 4) {
this.rate = "好"
}else if (this.value == 3) {
this.rate = "一般"
}else if (this.value == 2) {
this.rate = "差"
}else if (this.value == 1) {
this.rate = "非常差"
}
}
},
methods:{
getPhoto(){
document.getElementById("upfile").click();
},
changeImage(e) {
let file = e.target.files;
console.log(file)
let _this= this;
if (file.length<=(_this.maxImg - _this.imgUrls.length)) {
for (let i = 0;i<file.length;i++) {
console.log(file[i]);
var reader = new FileReader();
reader.readAsDataURL(file[i]);
reader.onload=function(e){
var img = new Image();
img.src = e.target.result;
img.onload = function(){
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
if (originHeight*originWidth >1000000) {
let ratio = originHeight*originWidth/1000000;
//目标尺寸
console.log("尺寸",ratio);
let num = Math.sqrt(ratio);
console.log(num);
var targetWidth = originWidth/num;
var targetHeight = originHeight/num;
} else{
var targetWidth = originWidth;
var targetHeight = originHeight;
}
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
/*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
var newUrl = canvas.toDataURL('image/jpeg', 0.92);
console.log(newUrl);
_this.imgUrls.push(newUrl);
// console.log(a.img.height);
}
}
}
//剩余张数
_this.leftImgs = _this.maxImg -(file.length+_this.imgUrls.length);
_this.addPhoto = _this.maxImg -(file.length+_this.imgUrls.length) +"/"+ _this.maxImg;
} else{
this.$toast('只能选择' + (this.maxImg - this.imgUrls.length) + '张了')
}
},
remove(index){
this.imgUrls.splice(index, 1);
this.leftImgs ++;
if (this.leftImgs == this.maxImg) {
this.addPhoto = "添加照片"
} else{
this.addPhoto = this.maxImg -this.imgUrls.length +"/"+ this.maxImg;
}
},
bigImg(index){
this.startIndex = index;
this.show = true;
},
onChange(index){
this.startIndex = index;
},
button(){
for (let i=0;i<this.imgUrls.length;i++ ) {
console.log(this.imgUrls[i]);
// const formData = new FormData();
// formData.append('file',this.imgUrls[i]);
console.log(formData);
axios.post("你的上传路径",{
file:this.imgUrls[i]
}).then(data=>{
console.log(data)
}).catch(err=>{
console.log(err)
})
}
}
}
})
</script>
</html>
1832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
