Aurelia：実際に動作するファイルアップロードの例（アップロードされたファイルを保存する）

Question

私はAureliaを初めて使っていて、まだNode JSの初心者です。私は完全に機能するファイルアップロードをまとめるのに苦労しています。いくつかのチュートリアル（例：http://www.petermorlion.com/file-upload-with-aurelia）を読み、さまざまなことを試しました。しかし、面白い名前を付けたすべての図書館をめちゃくちゃ混乱させて、ファイルアップローダが一緒に引かれるような単純な方法を見つけ出すのはむしろ混乱します。

私は、ナビゲーションスケルトンに基づいて小さなテストアプリました： https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext

を私は何のために求めていることが好ましいアウレリアスケルトンに基づいて、完全な小さなファイルのアップロードの例です。

以下は私のコードです。

<template> 
    <require from="./blob-to-url"></require> 
    <require from="./file-list-to-array"></require> 
    <require from="./upload"></require> 

    <section class="au-animate"> 
    <h2>${heading}</h2> 
    <div> 
     <div class="col-md-2"> 
     <ul class="well nav nav-pills nav-stacked"> 
      <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}"> 
      <a href.bind="row.href">${row.title}</a> 
      </li> 
     </ul> 
     </div> 
     <div class="col-md-10" style="padding: 0"> 
     <input type="file" multiple accept="image/*" files.bind="selectedFiles" change.delegate="onSelectFile($selectedFiles)"></input> 
      <ul> 
      <li repeat.for="file of selectedFiles | fileListToArray"> 
       <img src.bind="file | blobToUrl" /> 
       <p>${file.name}: ${file.type} ${file.size/1000} kb</p> 
       <p>Last Modified: ${file.lastModifiedDate}</p> 
      </li> 
      </ul> 
     </div> 
    </div> 
    </section> 
</template> 

これはupload.jsです：

export class UploadRouter { 
    heading = 'Upload Form'; 
    //upload = multer({ dest: 'uploads/' }); 
    //selectedFiles; 

    fileListToArr(fileList) { 
    let files = []; 
    if (!fileList) { 
     return files; 
    } 
    for(let i = 0; i < fileList.length; i++) { 
     files.push(fileList.item(i)); 
    } 
    return files; 
    } 

    onSelectFile(selectedFiles) 
    { 
    let formData = new FormData() 
    let fileArray = this.fileListToArr(selectedFiles) 

    for (let i = 0; i < fileArray.length; i++) { 
     formData.append('images', fileArray[i]); 
    } 

    console.log("Uploaded successfully..."); 

    return http.fetch(url + "/", { 
     method: 'put', 
     body: formData, 
    }) 
     .then(response => { 
     console.log("Uploaded successfully..."); 
     return response 
     }) 
     .catch(error => { 
     console.log("Some Failure..."); 
     throw error.content; 
     }) 
    } 
} 

ファイルリストツーarray.js：

export class FileListToArrayValueConverter { 
    toView(fileList) { 
    let files = []; 
    if (!fileList) { 
     return files; 
    } 
    for(let i = 0; i < fileList.length; i++) { 
     files.push(fileList.item(i)); 
    } 
    return files; 
    } 
} 

ブロブに

これはupload.htmlです-url.js：

export class BlobToUrlValueConverter { 
    toView(blob) { 
    return URL.createObjectURL(blob); 
    } 
} 

Answer 1

私は、私がオーレリア・フェッチ・クライアントのラッパーですspoonxオーレリア-APIを使用し、どちらも全くマルチパートフォームデータを持つ場合はうまく動作するようには思えHow to Upload Image Via WebApi

@ Orkhan Alikhanovの答えを使用しました私は何時も正しい運命の書式要求を得るために何時間も努力しました。 jsonオブジェクトのバイト配列としてファイルを送信すると、トリックはうまくいきました。もちろん、長さのチェックは必要ですが、非常に簡単で効果的なソリューションです。