這是一個通過接口實現上傳圖片，然後調用另一個接口統一提交的方法

結構

<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])
            }
        }
 

實現點擊單個圖片的多圖上傳