2016-08-07 55 views
0

這個代碼不工作..Ionic2和Angular2圖片上傳的例子?

<ion-item> 
 
    <ion-label stacked>Name</ion-label> 
 
    <ion-input ngControl="name" type="text" placeholder="Enter Category Name"></ion-input> 
 
</ion-item> 
 

 
<ion-item> 
 
    <ion-label stacked>Image</ion-label> 
 
    <ion-input ngControl="image" type="file" placeholder="Select Category Image"></ion-input> 
 
</ion-item>

有什麼辦法用離子輸入上傳的圖像文件,並使用formBuilder獲取上傳的文件中類型的腳本?

formBuilder.group({ 
 
    name: ['', Validators.required], 
 
    image: ['', Validators.required] 
 
})

回答

2

要使用離子2框架上傳圖片到服務器,你必須使用傳輸插件。 使用安裝傳輸插件

ionic plugin add cordova-plugin-file-transfer 
npm install --save @ionic-native/transfer 

然後從Transfer類調用上傳功能。

const fileTransfer: TransferObject = this.transfer.create(); 

    let options1: FileUploadOptions = { 
    fileKey: 'file', 
    fileName: 'name.jpg', 
    headers: {} 

    } 

fileTransfer.upload(imageDataLocalURL, 'http://localhost/ionic/upload.php', options1) 
.then((data) => { 
// success 
alert("success"); 
}, (err) => { 
// error 
alert("error"+JSON.stringify(err)); 
}); 

使用鏈接瞭解更多https://ampersandacademy.com/tutorials/ionic-framework-version-2/upload-an-image-to-the-php-server-using-ionic-2-transfer-and-camera-plugin

+0

我可以使用多張圖片,一重擊上傳? – Anuj

+0

我還沒有得到這個解決方案 – Anuj