JSフェッチAPIを使用してファイルをアップロードするにはどうすればよいですか？

Question

私はまだそれの周りに私の頭をラップしようとしています。

私は、ファイル入力でユーザーがファイル（あるいは複数）を選択することができます：

<form> 
    <div> 
    <label>Select file to upload</label> 
    <input type="file"> 
    </div> 
    <button type="submit">Convert</button> 
</form> 

をそして私は<fill in your event handler here>を使用してsubmitイベントをキャッチすることができます。しかし、いったんやりますと、fetchを使ってファイルを送信するにはどうすればよいですか？

fetch('/files', { 
    method: 'post', 
    // what goes here? What is the "body" for this? content-type header? 
}).then(/* whatever */); 

Answer 1

これは、upload関数は何をlookigされ、基本的例をコメントです：送信するには

var input = document.querySelector('input[type="file"]') 

var data = new FormData() 
data.append('file', input.files[0]) 
data.append('user', 'hubot') 

fetch('/avatars', { 
    method: 'POST', 
    body: data 
}) 

Answer 2

単一ファイルの場合、inputの.files配列のFileオブジェクトをそのままの値として使用することができますあなたのfetch()初期化子で10：

const myInput = document.getElementById('my-input'); 

// Later, perhaps in a form 'submit' handler or the input's 'change' handler: 
fetch('https://example.com/some_endpoint', { 
    method: 'POST', 
    body: myInput.files[0], 
}); 

FileBlobから継承し、Blobフェッチ規格で定義された許容BodyInit種類の一つであるので、これは動作します。

Answer 3

：私はこのようにそれをやった

// Select your input type file and store it in a variable 
const input = document.getElementById('fileinput'); 

// This will upload the file after having read it 
const upload = (e) => { 
    fetch('www.example.net', { // Your POST endpoint 
    method: 'POST', 
    headers: { 
     "Content-Type": "You will perhaps need to define a content-type here" 
    }, 
    body: e.currentTarget.result // This is the content of your file 
    }).then(
    response => response.json() // if the response is a JSON object 
).then(
    success => console.log(success); // Handle the success response object 
).catch(
    error => console.log(error); // Handle the error response object 
); 
}; 

// Event handler executed when a file is selected 
const onSelectFile = (files) => { 
    // Files is a list because you can select several files 
    // We just upload the first selected file 
    const file = input.files[0]; 
    const reader = new FileReader(); 

    // We read the file and call the upload function with the result 
    reader.onload = upload; 
    reader.readAsText(file); 
}; 

// Add a listener on your input 
// It will be triggered when a file will be selected 
input.addEventListener('change', onSelectFile , false);