如何使用ionic2應用程序將文件上傳到服務器？

Question

我現在正在使用這個離子本地插件：Camera，它可以給我圖像文件URI（例如，iOS上的assets-library://或Android上的content://）。但我不知道如何將這個文件上傳到我的服務器。我應該使用一個正常的HTML表格與<input type="file">？

Answer 1

請安裝FilePath插件以獲取本機路徑。然後使用下面的代碼。例如說你正在選擇一個圖像文件。

nativepath: any; 
uploadfn(){ 
    this.fileChooser.open().then((url) => { 
    (<any>window).FilePath.resolveNativePath(url, (result) => { 
    this.nativepath = result; 
    this.readimage(); 
    } 
) 
}) 
} 

readimage() { 
    (<any>window).resolveLocalFileSystemURL(this.nativepath, (res) => { 
     res.file((resFile) => { 
     var reader = new FileReader(); 
     reader.readAsArrayBuffer(resFile); 
     reader.onloadend = (evt: any) => { 
      var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg'}); 
      //do what you want to do with the file 
     } 
     }) 
    }) 
    } 

請在這裏看一看 - http://tphangout.com/ionic-2-serving-images-with-firebase-storage/

（涉及如何選擇從手機的文件系統的圖像，並把它上傳到火力存儲）

希望這有助於你。謝謝。

Answer 2

根據您的後端類型，有各種解決方案。如果您使用NoSQL，您可以使用base64格式傳輸和存儲圖像。

E.g.

import { 
    BarcodeScanner, 
    File, 
    ImagePicker, 
    ImagePickerOptions, 
    ImageResizer, 
    ImageResizerOptions 
} from 'ionic-native'; 

import filenameRegex from 'filename-regex'; 
import dirnameRegex from 'dirname-regex'; 

export interface ImageBlob { 
    name: string; 
    blob: string; 
} 

export function pickImage(options: ImagePickerOptions = {}): Promise<ImageBlob> { 
    interface ImagePath { 
     name: string; 
     dir: string; 
     path: string; 
    }; 

    const imagePickerOptions : ImagePickerOptions = 
     options == null ? { maximumImagesCount: 1 } as ImagePickerOptions : options; 

    function extractSingleImage(images: string | Array<string>): Promise<ImagePath> { 
     return new Promise((resolve, reject) => { 
      let imagePath: string = images instanceof Array ? images[0] : images; 

      let filename: string = imagePath.match(filenameRegex())[0]; 
      let dirname: string = imagePath.match(dirnameRegex())[1]; 

      if (filename == null || dirname == null) { 
       reject(new ReferenceError('Invalid image\'s path')); 
      } else { 
       resolve({ 
        name: filename, 
        dir: dirname, 
        path: imagePath 
       }); 
      } 
     }); 
    } 

    function resizePicture(
     image: ImagePath, 
     resizerOptions?: ImageResizerOptions 
    ): Promise<any> { 
     const options: ImageResizerOptions = resizerOptions || { 
      uri: image.path, 
      folderName: 'pictures', 
      width: 1024, 
      height: 1024, 
      quality: 90 
     }; 

     return ImageResizer 
      .resize(options) 
      .catch(err => console.error("Cannot resize", err)); 
    } 

    function readAsDataUrl(image: ImagePath): Promise<ImageBlob> { 
     return File 
      .readAsDataURL(image.dir, image.name) 
      .then(blob => ({ blob, name: image.name })) 
      .catch(err => console.error("Cannot read file as data-url", err)); 
    } 

    return ImagePicker 
     .getPictures(imagePickerOptions) 
     .then(extractSingleImage) 
     .then(resizePicture) 
     .then(extractSingleImage) 
     .then(readAsDataUrl); 
} 

注意，以上代碼爲ionic-angular@2.2.0和ionic-native@2.4.1。所以最新的離子已經改變了API。