Question

我正在尝试使用react和expressjs将图像上传到S3存储桶。当我尝试上传图像时，出现501未实现错误。我正在使用axios来联系我在服务器代码中创建的端点。

我的反应代码：

class FileUpload extends Component {
  state = {
    file: null
  };

  submitFile = (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('file', this.state.file[0]);
    axios.post(`test-upload`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(response => {
      // handle your response;
    }).catch(error => {
      // handle your error
    });
  }

  handleFileUpload = (event) => {
    this.setState({file: event.target.files});
  }

  render () {
    return (
      <form onSubmit={this.submitFile}>
        <input label='upload file' type='file' onChange= 
    {this.handleFileUpload} />
        <button type='submit'>Send</button>
      </form>
    );
  }
}

export default FileUpload;

我的服务器代码：

const uploadFile = (buffer, name, type) => {
  const params = {
    ACL: 'public-read',
    Body: buffer,
    Bucket: process.env.S3_BUCKET,
    ContentType: type.mime,
    Key: `${name}.${type.ext}`
  };
  return s3.upload(params).promise();
};

app.use('/', (req,res) =>{
  res.send(JSON.stringify({ greeting: `Hello!` }));
});

// Define POST route
app.post('/test-upload', (request, response) => {
  const form = new multiparty.Form();
    form.parse(request, async (error, fields, files) => {
      if (error) throw new Error(error);
      try {
        const path = files.file[0].path;
        const buffer = fs.readFileSync(path);
        const type = fileType(buffer);
        const timestamp = Date.now().toString();
        const fileName = `bucketFolder/${timestamp}-lg`;
        const data = await uploadFile(buffer, fileName, type);
        return response.status(200).send(data);
      } catch (error) {
        return response.status(400).send(error);
      }
    });
});

这是通过遵循互联网上的指南来完成的，但是似乎有些遗漏我无法弄清。

Answer 1

最后弄清楚了，

axios.post(/test-upload,

应该是

axios.post(http://localhost:3000/test-upload,

小型Web应用程序中的501未实现错误

1 个答案: