在 JavaScript 中上传文件

Question

HTML has a file input tag that lets users select one or more files to upload. For example, below is HTML that defines a file input.

<input type="file" />

Given an <input type="File">, you can access the selected file as a blob by accessing input.files[0]:

const input = document.querySelector('input[type="file"]');
const file = input.files[0];

file instanceof File; // true
file instanceof Blob; // true

Uploading a File

Once you have a blob, you can upload it using JavaScript's built-in FormData class. Axios supports HTTP POST requests with FormData, so uploading a file is easy:

const formData = new FormData();
formData.append('myimage.png', file);

// Post the form, just make sure to set the 'Content-Type' header
const res = await axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

Server-Side Setup

Parsing FormData uploads on the server side is tricky, you should use an npm module like Formidable to help you out. Below is how you can write the corresponding POST /upload endpoint to the above Axios request.

Note that the below code just returns the file name, it doesn't actually store the file. Once you have the parsed file in Node.js, you would need to either upload the file to AWS S3 or some other storage service, or store it on your server's hard drive using fs.

app.post('/upload', function(req, res) {
  const form = new formidable.IncomingForm();
  // Parse `req` and upload all associated files
  form.parse(req, function(err, fields, files) {
    if (err) {
      return res.status(400).json({ error: err.message });
    }
    const [firstFileName] = Object.keys(files);

    res.json({ filename: firstFileName });
  });
});

例如，这是一个 upload 将文件上传到 AWS S3 中名为 masteringjs-test 的存储桶的端点：

const AWS = require('aws-sdk');

app.post('/upload', function(req, res) {
  const form = new formidable.IncomingForm();
  // Parse `req` and upload all associated files
  form.parse(req, function(err, fields, files) {
    if (err) {
      return res.status(400).json({ error: err.message });
    }

    const [firstKey] = Object.keys(files);
    const upload = {
      Bucket: 'masteringjs-test',
      Body: fs.createReadStream(files[firstKey].path),
      Key: files[firstKey].name
    };
    s3.upload(upload, (err) => {
      if (err) {
        return res.status(400).json({ error: err.message });
      }
      return res.json({ ok: 1 });
    });
  });
});