欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动端 input type=‘file‘ 自定义样式、多图表单上传 及 踩坑 大总结

程序员文章站 2022-03-13 17:19:59
实现效果如下图:具体代码实现 如下:setEvaluation.vue(仅包括图片列表展示 及 自定义上传按钮):
  • ...

实现效果如下图:

移动端 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('服务器异常')
            }
        })
    }
    
}

以上代码片段 直接根据自己公司需求改改就可以直接使用。今天就先到这里了。

本文地址:https://blog.csdn.net/weixin_38383905/article/details/107379222