文件的上传与下载实现（react、express，create-react-app脚手架）

james 发布于2019-08-26 12:12 / 2452人阅读

摘要：项目结构为前后端分离，中间布了一层。文件上传要求将文件信息等发送到后台。上传文件时，使用表单上传的，则需要设置表单的等于，因为该值默认值为使用库上传，需设置为。使用上传，无需设置。

项目结构为前后端分离，中间布了一层node。

文件上传

要求：将文件信息等发送到后台。

html代码

客户端上传文件时的信息处理

可以使用FormData来异步上传一个二进制文件。上传文件时，

使用form表单上传的，则需要设置表单的 enctype 等于 multipart/form-data，因为该值默认值为application/x-www-form-urlencoded.

使用axios库上传，需设置Content-Type为multipart/form-data。

使用fetch上传，无需设置Content-Type。

const file = document.querySelector("[type=file]");
const formData = new FormData();
formData.append("file", file.files[0]);
formData.append("userName", "admin");
axios
  .post("/api/list/upload", formData, {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  })
  .then(() => {
    console.log("上传成功");
  });

成功发送数据的样子

FormData若需传输数组之类的，根据后台所使用的语言和框架选择，例如后台用的是PHP，可以这样写：

fileList.forEach((file) => {
   formData.append("files[]", file);
});

文件下载 html代码

 模板下载

node端处理

因为项目中使用了express，所以可以直接通过res.download方法来下载文件。
在server.js文件里面添加

//下载文件
const path = require("path");
app.use("/download/", function(req, res) {
  const filepath = path.join(__dirname, req.url + ".xlsx"); // 文件存储的路径
  res.download(filepath);
});

文件结构为

问题

因为是使用create-react-app搭建的，在本地开发环境测试下载文件的情况时，总是无法找到正确路径进行下载。后来在create-react-app说明页面的Proxying API Requests in Development模块找到这样一段话。

This way, when you fetch("/api/todos") in development, the development server will recognize that it’s not a static asset, and will proxy your request to http://localhost:4000/api/todos as a fallback. The development server will only attempt to send requests without text/html in its Accept header to the proxy.

大概意思就是，在开发时请求fetch("/api/todos"),开发服务器意识到它不是静态资产，所以会将请求进行代理。开发服务器只会将Accept头中没有text / html的请求进行代理。

所以在本地开发环境下测试下载文件时，总是不能找到文件的正确路径进行下载。

解决 方法一

开发测试时直接将href写成完整的请求路径。当然，测试完成后，还是要将“http://20.26.150.69:3001”给删掉的。

模板下载

方法二

根据create-react-app说明页面的Configuring the Proxy Manually

All requests matching this path will be proxies, no exceptions. This includes requests for text/html, which the standard proxy option does not proxy.
意思是匹配此路径的所有请求都将是代理，包括对text / html的请求。
所以，可以将package.json里面的

改成类似这种形式，将Accept头中有text / html的请求也纳入代理范围内。

参考自：
FormData.append()

云服务器 GPU云服务器 create-react-app asp实现上传与 php实现上传文件 ajax实现文件上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108214.html

文件的上传与下载实现（react、express，create-react-app脚手架）

摘要：项目结构为前后端分离，中间布了一层。文件上传要求将文件信息等发送到后台。上传文件时，使用表单上传的，则需要设置表单的等于，因为该值默认值为使用库上传，需设置为。使用上传，无需设置。项目结构为前后端分离，中间布了一层node。文件上传要求：将文件信息等发送到后台。 html代码客户端上传文件时的信息处理可以使用FormData来异步上传一个二进制文件。上传文件时，使用f...

Aceyclee 2019-08-02 11:15 评论0 收藏0
react+express项目

摘要：暴露所有内建配置，项目下会新增或对部分配置文件进行修改。开发环境开发时，前端项目和后端项目运行时端口端口不同，存在跨域问题。项目目录结构优化项目目录结构优化开发目录主要是目录，因此需要修改的目录主要是目录。 1 开发环境准备（windows） 1.1 安装nodejs和npm 1) 下载nodejs安装包：http://nodejs.org/en/download/ nodejs安...

Luosunce 2019-08-23 14:13 评论0 收藏0
在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范

摘要：编码规范是独角兽公司内部的编码规范，该项目是上很受欢迎的一个开源项目，在前端开发中使用广泛，本文的配置规则就是以编码规范和编码规范作为基础的。更新时间：2019-01-22React.js create-react-app 项目 + VSCode 编辑器 + ESLint 代码检查工具 + Airbnb 编码规范前言为什么要使用 ESLint 在项目开发过程中，编写符合团队编码规...

Hujiawei 2019-08-23 14:55 评论0 收藏0