实现点击单个图片的多图上传

这是一个通过接口实现上传图片，然后调用另一个接口统一提交的方法

结构

<div class="load-box">
         <label for="businessLicenceUrl" class="imgFile">
                 <img class="photo-img">
                 <img src="../../assets/e_photo.jpg" class="default-img">
                 <input type=‘file‘ id="businessLicenceUrl">
         </label>
</div>

js文件

var that = this
        var $fileCells = {
            businessLicenceUrl: {
                name: "企业营业执照"
            },
            accountsPermitsUrl: {
                name: "开户许可证"
            },
            idCardFaceUrl: {
                name: "法人身份证正面"
            },
            idCardBackUrl: {
                name: "法人身份证背面"
            },
            idCardHoldUrl: {
                name: "法人手持身份证"
            }
            };
            var $imgFile = document.querySelectorAll(".imgFile");
            for(var i=0;i<$imgFile.length;i++){
                var $thisLabel = $imgFile[i],
                    $thisInput = $thisLabel.querySelector("input[type=‘file‘]");
                $fileCells[$thisInput.id].fileInput = $thisInput;
                $fileCells[$thisInput.id].defaultImg = $thisLabel.querySelector(".default-img");
                $fileCells[$thisInput.id].photoImg = $thisLabel.querySelector(".photo-img");
                $thisInput.addEventListener("change",function(){
                    if(!FileReader){
                        that.$message({
                            message: ‘您的手机不支持拍照‘,
                            type: ‘warning‘
                        });
                    }else{
                        var thisCell = $fileCells[this.id];
                        var $fileEle = this.files;
                        if($fileEle.length > 0){
                            var $file = $fileEle[0];
                            if(!/image\/\w+/.test($file.type)){
                                that.$message({
                                    message: ‘您上传的图片格式不正确哦！‘,
                                    type: ‘warning‘
                                });
                            }else{
                                var $fileReader = new FileReader();
                                $fileReader.readAsDataURL($file);
                                $fileReader.onload=function(){
                                    thisCell.photoImg.src = this.result;
                                    thisCell.photoImg.style.display = "block";
                                    thisCell.defaultImg.style.display = "none";
                                };

                                var formData = new FormData();
                                formData.append("photo",$file);
                                $.ajax({
                                    url: ‘http://10.100.32.126:9090/‘ + "/fast/upload",
                                    type: "POST",
                                    processData: false,
                                    contentType: false,
                                    dataType: "JSON",
                                    data: formData,
                                    success: function(response){
                                        if(response.code == 0){
                                            thisCell.imgPath = response.data;
                                            that.$message({
                                                message: thisCell.name + "上传完成",
                                                type: ‘success‘
                                            });
                                        }
                                    },
                                    error: function(){
                                        that.$message({
                                            message: ‘网络异常‘,
                                            type: ‘warning‘
                                        });
                                    }
                                });

                            }
                        }else{
                            that.$message({
                                message: ‘没有选择照片‘,
                                type: ‘warning‘
                            });
                        }
                    }
                })
            }

            document.getElementById("next-button").addEventListener("click",function(){
                var params = {
                    id: window.localStorage? localStorage.getItem("id"): Cookie.read("id")
                };
                for(var i in $fileCells){
                    var thisPath = $fileCells[i].imgPath;
                    if(thisPath){
                        params[i] = $fileCells[i].imgPath;
                    }else{
                        that.$message({
                            message: "请上传" + $fileCells[i].name,
                            type: ‘warning‘
                        });
                        params = false;
                        break;
                    }
                }
                if(params){
                    console.log(params)
                    $.ajax({
                        url: ‘http://10.100.32.126:9090/‘ + "/api/account/callAccountExtPicInfo",
                        type: "POST",
                        contentType: "application/json",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("ticketCookie", localStorage.getItem("token"));
                        },
                        data: JSON.stringify(params),
                        success: function(response){
                            if(response.code == "0"){
                                // location.href = "fourth.html"
                                that.$router.push(‘save_succeed‘)
                            }
                        },
                        error: function(){
                            that.$message({
                                message: "网络异常",
                                type: ‘warning‘
                            });
                            // layer.toast("网络异常");
                        }
                    });
                }
            })
            if (window.localStorage.isCompany==‘1‘){
                this.$router.push(‘start‘)
            }else{
                this.$router.push(‘enterprisethree‘)
            }
    }

这是一个给服务器上传base64的方法

结构

<div class="load-box">
          <img v-if="form.businessLicenceUrl" :src="form.businessLicenceUrl" ref="img">
          <img v-else src="../../assets/e_photo.jpg" >
          <input type=‘file‘ @change="change" ref="input">
</div>

js文件

getImg() {
            this.$axios.post(‘/fast/upload‘)
            .then(function(res) {
                
            })
        },
        //企业营业执照
        change (e) {
            this.getSize(e)
        
        },
        // 获取图片大小，可以在这里
        getSize (e) {
        // console.log(e)
            let size = e.target.files[0].size
            // console.log(size)
            if (size<=1024000) {
                // ok的话允许上传
                this.getSrc()
            } else {
                alert(‘图片太大！‘)
            }
        // return e.target.files[0].size
        },
        getSrc () {
            var that = this
            const refs = this.$refs
            const elInput = refs.input
            const elImg = refs.img

            const reader = new FileReader()
            reader.onload = (e) => {
                // 这里的result就是base64格式的地址
                const src = e.target.result
                // console.log(‘base64：‘, src)
                that.form.businessLicenceUrl = src
                // elImg.src = src  // 给预览图片加上地址
                // 下面可以把图片信息发送到后台，base64，图片名，之类
            }
            if (elInput.files && elInput.files[0]) {
                reader.readAsDataURL(elInput.files[0])
            }
        }