这是一个通过接口实现上传图片，然后调用另一个接口统一提交的方法
结构
<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]) ???????????} ???????}