使用Node，Express，Multer响应单个文件上传，然后存储到Google Cloud Storage

如何解决使用Node，Express，Multer响应单个文件上传，然后存储到Google Cloud Storage

我为我的3D项目建立了一个网站。我想将图像上传到React Web并将其存储在Google Cloud Storage存储桶中。当我用Postman发出请求时，后端服务器似乎可以将图像发送到Google Cloud Storage，但没有收到从前端上传图像的请求。我遇到以下问题：

1) xhr.js:184 POST http://localhost:9001/uploads 500 (Internal Server Error)

2) createError.js:16 Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:69)

我的上传代码在Modeling.js中：

import React,{Component} from 'react';
import axios from 'axios';
import { toast } from 'react-toastify';

export class modeling extends Component {
  constructor(props){
    super(props);
    this.fileChangedHandler = this.fileChangedHandler.bind(this);
    this.uploadHandler = this.uploadHandler.bind(this);

    this.state={
      selectedFile: ''
    }
  }

  fileChangedHandler = event => {
    this.setState({
      selectedFile: event.target.files[0],})
  }

  uploadHandler = event => {
    event.preventDefault()
    const data = new FormData() 
    data.append('image',this.state.selectedFile)
    axios.post("http://localhost:9001/uploads",data,{ 
    })
      .then(res => { // then print response status
        console.log(res.statusText)
      })
    }
  render(){
    return (
        <h3>Upload a 2D image to get a 3D model</h3>         
        <input className="btn btn-secondary" type="file" onChange={this.fileChangedHandler} />
         <button className="btn btn-primary" onClick={this.uploadHandler} id="renderButton">Uplooad</button>
    )
  }
}

export default modeling

我的后端代码是：

const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const multer = require('multer')

const uploadImage = require('./helpers/helpers')

const app = express()

const multerMid = multer({
  storage: multer.memoryStorage(),limits: {
    // no larger than 5mb.
    fileSize: 5 * 1024 * 1024,},});

app.use(cors());
app.disable('x-powered-by')
app.use(multerMid.single('file'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))

app.post('/uploads',async (req,res,next) => {
  try {
    const myFile = req.file
    const imageUrl = await uploadImage(myFile)

    res
      .status(200)
      .json({
        message: "Upload was successful",data: imageUrl
      })
  } catch (error) {
    next(error)
  }
})

app.use((err,req,next) => {
  res.status(500).json({
    error: err,message: 'Internal server error!',})
  next()
})

app.listen(9001,() => {
  console.log('app now listening for requests!!!')
})

我已经在Postman中测试了后端，已成功上传，并且该图像也显示在我的Google Cloud Storage存储桶中，如下图所示

任何人都可以给我一些建议，为什么我的前端无法接收到HTTP发布请求以在URL“ http：// localhost：9001 / uploads”上载，以及如何解决此问题？非常感谢您的帮助。非常感谢！

解决方法

您可以尝试像这样向您的函数添加异步并等待吗？

uploadHandler = async (event) => { 
    event.preventDefault() 
    const data = new FormData() 
    data.append('image',this.state.selectedFile) 
    await axios.post("./uploads",data,{ }).then(res => { 
    // then print response status 
    console.log(res.statusText) 
    }).catch(error => 
    console.log(error)) 
}