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