我仍在努力寻找解决方案。
我可以让用户使用文件输入来选择文件(甚至多个):
<form> <div> <label>Select file to upload</label> <input type="file"> </div> <button type="submit">Convert</button> </form>
我可以submit使用捕获事件<fill in your event handler here>。但是一旦完成,如何使用发送文件fetch?
submit
<fill in your event handler here>
fetch
fetch('/files', { method: 'post', // what goes here? What is the "body" for this? content-type header? }).then(/* whatever */);
这是带有注释的基本示例。该upload功能是您要寻找的:
upload
// 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 = (file) => { fetch('http://www.example.net', { // Your POST endpoint method: 'POST', headers: { // Content-Type may need to be completely **omitted** // or you may need something "Content-Type": "You will perhaps need to define a content-type here" }, body: file // This is your file object }).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 = () => upload(input.files[0]); // Add a listener on your input // It will be triggered when a file will be selected input.addEventListener('change', onSelectFile, false);