小型 Web 应用程序中的 501 Not Implemented 错误答案

【问题标题】：501 Not Implemented error in small web app小型 Web 应用程序中的 501 Not Implemented 错误
【发布时间】：2019-05-28 05:23:02
【问题描述】：

我正在尝试使用 react 和 expressjs 将图像上传到 S3 存储桶。当我尝试上传图像时，我收到 501 Not Implemented 错误。我正在使用 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);
      }
    });
});

这是通过遵循互联网上的指南完成的，但似乎缺少一些我无法弄清楚的东西。

【问题讨论】：

我应该补充一点，我已经在package.json中设置了代理到服务器所在的位置。

标签： reactjs express amazon-s3 axios

【解决方案1】：

最后想通了，

axios.post(/test-upload,

应该是

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

【讨论】：