我试图用多,以加快上传了大文件的大小来实现文件上传功能。
我无法弄清楚,为什么这是行不通的。
我通过控制台提供的环境变量现在。
当我点击发送按钮,没有任何反应。我的两个服务器都运行正常(我敢肯定他们的)
问题:
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;
我经常上载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
});
})
显然,你正在做的几乎一切是正确的,除了一个小细节引起我的注意。
fileName
从files.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
一些额外的调试技巧,如果你还没有尝试过尚未:
get
路线只是为了确保客户端和服务器互相交谈。get
要求列出你的水桶,以确保与S3通信按预期工作:https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listBuckets-property我希望这有帮助!干杯!