VUE axios上傳圖片到七牛的實例代碼

update(e){
 let file = e.target.files[0]; 
 let param = new FormData(); //創(chuàng)建form對象
 param.append('file',file,file.name);//通過append向form對象添加數(shù)據(jù)
 param.append('chunk','0');//添加form表單中其他數(shù)據(jù)
 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);
 }) 
}

 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(); //創(chuàng)建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);//然后將參數(shù)上傳七牛
 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('已上傳該圖片');
 }
 })
 },