Question

我正在尝试使用分段实现文件上传功能，以加快大文件的上传速度。

我无法弄清楚为什么它不起作用。

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

当我单击发送按钮时，什么也没有发生。我的两个服务器都运行良好（我非常确定）

问题：

1>当我这样做

 ggplot(as.data.frame(allu),
   aes(y = allu$Freq, axis1 = allu$a1, axis2 = allu$a2, axis3 = allu$a3,axis4 = allu$a4, axis5 = allu$a5, axis6 = allu$a6, axis7 = allu$a7, axis8 = allu$a8)) +
   geom_alluvium(aes(fill = allu$a1), width = 1/12) +
  geom_stratum(width = 1/12, fill = "black", color = "grey") +
  geom_label(stat = "stratum", label.strata = TRUE) +
  scale_x_discrete(limits = c ("a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8"), expand = c(0.02, 0.02)) +  >     scale_fill_brewer(type = "qual", palette = "Set1") +
  ggtitle("CLL")

它抛出一个错误。我应该如何将文件（数据）发布到后端？

请指出错误或要做的事情。

预先感谢！

以下是我的FileUpload.js

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

我的后端节点upload.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;

Answer 1

我总是将照片上传到cloudinary。您也可以将它们保存在本地，但从长远来看，我认为这不是解决方案。

后端

  // 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
    });
  })

前端

<span v-for="item in items" v-if="item.shouldRender">...</span>

Answer 2

显然，您所做的一切都正确，除了一个引起我注意的小细节。

您的fileName是从files.name的{{1}}定义的（尝试用console.log进行验证）。您需要做的是给它一个唯一的名称，例如时间戳。

undefined

还要确保您正在代理请求：https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

一些其他的调试技巧，如果您还没有尝试过的话：

请尝试在服务器中创建一条简单的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); } }); });路由，以确保客户端和服务器之间正在相互通信。
尝试首先创建一个get请求以列出您的存储桶，以确保与S3的通信按预期进行：https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listBuckets-property

我希望这会有所帮助！干杯！

在MERN Stack中上传多部分文件

2 个答案: