溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
瀏覽器上傳圖片到服務端，我用過兩種方法：
1.本地圖片轉換成base64，然后通過普通的post請求發送到服務端。
操作簡單，適合小圖，以及如果想兼容低版本的ie沒辦法用此方法
2.通過form表單提交。
form表單提交圖片會刷新頁面，也可以時form綁定到一個隱藏的iframe上，可以實現無刷新提交數據。但是如果想傳輸多條form表單數據，需要寫很多dom，同時還要寫iframe，太麻煩。
目前感覺比較干凈的辦法就是通過axios的post請求，發送form數據到后臺。
html部分，至于界面優化，可以把input file的opacity設置為0，點擊其父容器，即觸發file
axios的post請求，發送form數據部分，這樣就可以無刷新的提交form數據到后臺
update(e){
let file = e.target.files[0];
let param = new FormData(); //創建form對象
param.append('file',file,file.name);//通過append向form對象添加數據
param.append('chunk','0');//添加form表單中其他數據
console.log(param.get('file')); //FormData私有類對象，訪問不到，可以通過get判斷值是否傳進去
let config = {
headers:{'Content-Type':'multipart/form-data'}
}; //添加請求頭
this.axios.post('http://upload.qiniu.com/',param,config)
.then(response=>{
console.log(response.data);
})
}
以下部分是擴展
vue開發環境下，上傳圖片到七牛
最近著手的約能人項目，需要上傳圖片到七牛，但是感覺只是簡單的上傳圖片還需要引七牛的js，太麻煩了，就自己一切從簡。實現邏輯：獲取后臺返回的七牛token，然后axios的post請求，發送form數據到七牛。
七牛的token是其平臺封裝好的，直接在自己服務器配置就能獲取到 在其官網上可以找到直接能用的代碼 ，在七牛平臺獲取到后，返回給前臺直接拿就好了
以下是直接上傳圖片到七牛，不需要安裝七牛亂七八糟的js,只需要通過七牛的form表單上傳就行了。
update(e){
let file = e.target.files[0];
let d = new Date();
let type = file.name.split('.');
let tokenParem = {
'putPolicy':'{\"name\":\"$(fname)\",\"size\":\"$(fsize)\",\"w\":\"$(imageInfo.width)\",\"h\":\"$(imageInfo.height)\",\"hash\":\"$(etag)\"}',
'key':'orderReview/'+d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate()+'/'+d.valueOf()+'.'+type[type.length-1],
'bucket':this.domain,//七牛的地址，這個是你自己配置的（變量）
};
let param = new FormData(); //創建form對象
param.append('chunk','0');//斷點傳輸
param.append('chunks','1');
param.append('file',file,file.name)
console.log(param.get('file')); //FormData私有類對象，訪問不到，可以通過get判斷值是否傳進去
let config = {
headers:{'Content-Type':'multipart/form-data'}
};
//先從自己的服務端拿到token
this.axios.post(api.uploadToken,qs.stringify(tokenParem))
.then(response=>{
this.token = response.data.uploadToken;
param.append('token',this.token);
if(this.images.length>8){
alert('不能超過9張');
return;
}
this.uploading(param,config,file.name);//然后將參數上傳七牛
return;
})
},
uploading(param,config,pathName){
this.axios.post('http://upload.qiniu.com/',param,config)
.then(response=>{
console.log(response.data);
let localArr = this.images.map((val,index,arr)=>{
return arr[index].localSrc;
})
if(!~localArr.indexOf(pathName)){
this.images.push({'src':this.showUrl+response.data.key,'localSrc':pathName});
}else{
alert('已上傳該圖片');
}
})
},
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
