使用 Axios 和 Vanilla JS 发布文件

Question

I have created an input that can receive a file. Once the submit button is clicked, I set up a form Data, try to append the file to it, and then launch an axios post request to a server.

Sadly, I don't know how to pass the file to formData:

button.onclick = function(){
   let formData = new FormData();
   formData.append('myFile', e.dataTransfer.getData("files"));
   axios.post("/api/upload", formData)
      .then(response =>{
         console.log(response.data)})
      .catch(err=> {
         console.log("error")
   })
}

What is the correction to add to e.dataTransfer.getData("files")? The input file can be an image, a pdf, etc. The input looks like that:

<input type="file" multiple/>

Thanks.

Answer 1

try to append the formData this way:

form.append('fieldName', 'fileBufferData', 'fileName');

Field name will be the name the server look up in the form. The buffer is the data/content of the file. And file name.. well.. it's the file name.

Or it could be because you didn't set the header:

            let form = new FormData();
            form.append('field', 'buffer', 'fileName');

            axios.post('/api/upload', form, {
                headers: {
                    'Content-Type': `multipart/form-data; boundary=${form._boundary}`
                }
            }).then((res) => {
                console.log(res.data);
            }).catch((err) => {
                console.log(err);
            });

If this doesn't help it might be a problem on the server side.