多文件上传在MERN堆栈

问题描述 投票:0回答:2

我试图用多,以加快上传了大文件的大小来实现文件上传功能。

我无法弄清楚,为什么这是行不通的。

我通过控制台提供的环境变量现在。

当我点击发送按钮,没有任何反应。我的两个服务器都运行正常(我敢肯定他们的)

问题:

1>当我做

axios.post(`http://localhost:4000`, data) 

它抛出一个错误。我要如何上传我的文件(数据)到后端?

请指出错误或事情要做。

提前致谢!

以下是我的FileUpload.js

import React, { Component } from 'react';
import axios from 'axios';

class FileUpload extends Component {

  constructor (props) {

   super(props);

    this.submitFile = this.submitFile.bind(this);

    this.fileInput = React.createRef();
  }


  submitFile = (event) => {

    event.preventDefault();
    var data = {

      file: this.fileInput.current.files[0],
      name: this.fileInput.current.files[0].name
    };

    axios.post(`http://localhost:4000`, data)

    .then(response => {
      console.log(response);
    })

    .catch(error => {
      console.log(error);
    });
  }

  render() {

    return (

      <form onSubmit={this.submitFile}>
        <input type='file' ref={this.fileInput} />

        <button type='submit'>Send</button>
      </form>

    );
  }

}

 export default FileUpload;

我的后端节点upload.js看起来像以下:

const multer = require('multer');
const multerS3 = require('multer-s3');
const AWS = require('aws-sdk');

var cred = require('../aws/config')

const AWS_SECRET_ACCESS = cred.access();
const AWS_ACCESS_KEY = cred.awskey();


// configure the keys for accessing AWS
AWS.config.update({
  accessKeyId: process.env.AWS_SECRET_ACCESS,
  secretAccessKey: process.env.AWS_ACCESS_KEY,
  region: ''
});

// create S3 instance
const s3 = new AWS.S3();

const upload = multer({
  storage: multerS3({
    s3:s3,
    bucket: '',
    metadata: function (req, file, cb) {
  cb(null, {fileName: 'uploadit'});
    },
    key: function (req, file, cb) {
      cb(null, Date.now().toString())
    }
  })
})


module.exports = upload;
node.js reactjs amazon-s3 multipartform-data
2个回答
0
投票

我经常上载cloudinary我的照片。您可以保存到本地太多,但于长远,我不认为这是一个解决方案。

后端

import express from 'express'; 
import webpackMiddleware from 'webpack-dev-middleware';
import webpack from 'webpack';
import webpackConfig from './webpack.config.js';
const app = express();
app.use(webpackMiddleware(webpack(webpackConfig)));
const port = process.env.PORT || 5000;
const cloudinary = require('cloudinary');

cloudinary.config({ 
  cloud_name: 'your cloud name', 
  api_key: 'your api key', 
  api_secret: 'your api secret' 
});

app.use(multipartMiddleware);
app.post('/images', multipartMiddleware, (req, res) => {
  // file upload
  let formData = Object.values(req.files);
  let photoName = Object.keys(req.files);

  cloudinary.uploader.upload(
    formData[0].path,
    function () { res.json('Uploaded!')},
    {
      public_id: photoName[0],
      crop: 'scale',
      width: 1200,
      height: 400,
      quality: 100,
      tags: ['usedCars', 'usedCars']
    }
  )
});
app.listen(port, () => {
  console.log('Your app on port:', port);
});

前端

  // input type file
  <input type="file"
   accept="image/*"
   onChange={evt => this.updateFileValue(evt)}
   id="carPhoto"/>

  // updating state
  updateFileValue(evt) {
    this.setState({
       carPhoto: evt.target.files[0]
    });
  }

  // post request
  Apis.addCarsList(this.state).then((res) => {
    const fd = new FormData();
    const photoName = "a name for your photo, I usually get  the mongoId as a photo name";
    fd.append(res.data, this.state.carPhoto, photoName);
    axios.post('/images', fd).then((res) => {
      // do w/e
    });
  })

0
投票

显然,你正在做的几乎一切是正确的,除了一个小细节引起我的注意。

  1. fileNamefiles.name,这是undefined定义(尝试CONSOLE.LOG该验证)。什么,你需要做的就是给它一个唯一的名称,例如像时间戳。
app.post('/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 fileName = Date.now().toString();
        const data = await uploadFile(buffer, fileName, type);
        return response.status(200).send(data);
      } 

      catch (error) {
        return response.status(400).send(error);
      }
    });
});

另外,还要确保你进行代理您的要求:https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

一些额外的调试技巧,如果你还没有尝试过尚未:

我希望这有帮助!干杯!

© www.soinside.com 2019 - 2024. All rights reserved.