移动端 input type=‘file‘ 自定义样式、多图表单上传总结
作者：互联网
实现效果如下图：
具体代码实现 如下：
setEvaluation.vue(仅包括图片列表展示 及 自定义上传按钮):
<div class="eva_uploadImg">
<div class="eva_loadImgList">
<ul class="clearfix">
<li class="fl eva_myImg" v-for="(item,index) in imgDatas" :key="index" >
<img class="eva_imgTips" :src="item" alt="">
<div class="eva_closBtn" v-show="imgDatas" @click="handlerRemoveClick(index)">+</div>
</li>
<li class="fl" v-show="imgDatas.length<6">
<div class="eva_upLoadBtn" @click.stop="upLoad">
<img class="eva_cameraImg" src="@/assets/image/camera.png" alt="">
<span>添加照片</span>
</div>
<form action="" enctype='multipart/form-data' method="post" target="uploadFrame">
<input
type="file"
accept="image/*" mutiple="mutiple"
@change="changeImage($event)"
ref="avatarInput"
id="avatarInput"
style="display:none"
>
</form>
<iframe id="uploadFrame" name="uploadFrame" style="display:none;"></iframe> <!--解决form表单提交数据刷新问题 -->
</li>
</ul>
<span class="eva_imgDataNum">{{imgDatas.length}}/6张</span>
</div>
</div>
提交按钮：
<div class="eva_submit" @click.stop="handlerSubmitClick">提交</div>
css样式汇总：
.eva_uploadImg
.eva_loadImgList
.eva_myImg
border-radius 10px;
position:relative;
margin: 30px;
margin-left:0;
&:nth-child(3n)
margin-right: 0;
.eva_imgTips
width: 200px;
height 200px;
border-radius: 10px;
.eva_closBtn
width: 50px;
height: 50px;
position: absolute;
top: -20px;
right: -20px;
font-size: 46px;
text-align:center;
line-height: 50px;
color: #fff;
border-radius: 100%;
background: rgba(55,55,55,.5);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
.eva_upLoadBtn
width: 200px;
height: 200px;
color: #999;
border: 2px dashed #999;
background: #F3F3F3;
border-radius: 10px;
margin: 30px 0;
box-sizing: border-box;
.eva_cameraImg
width: 64px;
height: 52px;
display:block
margin: 50px auto;
margin-bottom: 15px;
span
display:block;
font-size:24px;
padding:5px 0;
text-align: center;
.eva_imgDataNum
display: block;
text-align: right;
.eva_submit
width: 100%;
height:98px;
background: #5b3719;
color: #fff;
font-size: 30px;
line-height: 98px;
text-align: center;
position:fixed;
bottom: 0;
left: 0;
right: 0;
data定义变量：
data(){
return{
orderId:null,
evaluationList:[],
commonContent:'',
imgDatas:[], //存储上传的图片数据
orderItemId:null,
filesArr: [],
id:null
}
},
methods里change事件、提交事件方法实现：
changeImage(e) {
// 上传图片事件
let files = e.target.files;
// 如果没有选中文件，直接返回
if (files.length === 0) {
return;
}
if (this.imgDatas.length + files.length > 6) {
this.$toast('最多只能上传6张图片！');
return;
}
let reader;
let file;
let imgDatas = this.imgDatas;
for (let i = 0; i < files.length; i++) {
file = files[i];
this.filesArr.push(file);
reader = new FileReader();
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
reader.onload = function(e) {
// if (imgDatas.indexOf(this.result) === -1) { // 判断数组里值相同的无法上传，具体看自己需求
imgDatas.push(this.result);
// }
};
reader.readAsDataURL(file);
}
}
e.target.value = ''// 清空value值防止 同一张图片无法重复提交
},
// 提交
handlerSubmitClick(){
if(this.commonContent.length > 500){
this.$toast('您输入的内容超出文字限制')
}else if(this.commonContent == ''){
this.$toast('评论失败，文字内容必填哦！')
}else if(this.imgDatas.length>0){
/*表单上传文件定义实例formData对象*/
var formData = new FormData();
/* this.filesArr 存储上传的图片数据数组*/
this.filesArr.forEach((file) => {
/*遍历 this.filesArr 添加到 formData对象里*/
formData.append('upload', file);
});
/*formData对象里 需要传给后台其他字段定义方式*/
formData.append('orderItemId',this.orderItemId);
if(this.id != null && this.id != 0){
formData.append('id',this.id)
}
formData.append('content',this.commonContent);
/* 发起请求、将formData对象 传给后台*/
axios({
url:urlList.setCommentsInfo,
method: 'POST',
header:{
'Authorization': '*****', //此为接口身份认证，具体实现看你们公司具体定义
'content-type': 'multipart/form-data',
'cookie': sessionStorage.getItem("cookieKey"), //读cookie
},
data:formData
}).then(res=>{
if(res.data.code == 200){
this.$toast('评论成功')
if(this.$route.query.orderId){
this.$router.push({
path:'/orderList',
query:{
status:3
}
})
}else{;
this.$router.go(-1)
}
}else if(res.data.code == 400){
this.$toast(res.data.data)
}else{
this.$toast('服务器异常，评论失败')
}
})
}else{
var params = {
orderItemId:this.orderItemId,
content:this.commonContent
};
this.$http.post(urlList.setCommentsInfo,params).then(res=>{
if(res.data.code == 200){
this.$toast('评论成功');
if(this.$route.query.orderId){
this.$router.push({
path:'/orderList',
query:{
status:3
}
})
}else{;
this.$router.go(-1)
}
}else if(res.data.code == 400){
this.$toast(res.data.data)
}else{
this.$toast('服务器异常')
}
})
}
}
以上代码片段 直接根据自己公司需求改改就可以直接使用。今天就先到这里了。
标签：toast,自定义,eva,formData,else,file,res,input,data 来源： https://www.cnblogs.com/zhu-xl/p/13327948.html