Come caricare un file con l'API di recupero JS?

Question

Sto ancora cercando di avvolgere la mia mente intorno ad esso.

posso avere l'utente selezionare il file (o anche più) con l'ingresso di file:

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

e posso catturare l'evento submit utilizzando <fill in your event handler here>. Ma una volta fatto, come posso inviare il file usando fetch?

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

Answer 1

Questo è un semplice esempio e commentato, la funzione upload è ciò che stai per lookig:

// 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); 

Answer 2

ho fatto in questo modo:

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 3

Per inviare un singolo file, è possibile utilizzare semplicemente l'oggetto File dall'array input.files direttamente come valore di body: nel fetch() initializer:

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], 
}); 

Questo funziona perché File eredita da Blob, e Blob è uno dei ammissibili BodyInit tipi definiti nel Fetch standard.