资讯专栏INFORMATION COLUMN

文件的上传与下载实现(react、express,create-react-app脚手架)

muddyway / 1011人阅读

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

项目结构为前后端分离,中间布了一层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()

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

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

相关文章

  • 文件上传下载实现reactexpress,create-react-app手架

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

    james 评论0 收藏0
  • 文件上传下载实现reactexpress,create-react-app手架

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

    Aceyclee 评论0 收藏0
  • react+express项目

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

    Luosunce 评论0 收藏0
  • 前端开发环境安装、搭建及配置

    摘要:干货填坑中待续官网下载地址下载默认安装目录为你也可以修改目录记住,一路都是下一步最后,等安装好在命令行里,看是否会出现一个版本号,出现了说明安装成功最后还要检查一下环境变量是否配置我的电脑此电脑右键,打开属性官网下载地址下载双击刚下载的 干货( Dry goods?) node.js brew(just for mac) ruby npm cnpm yarn git webpack ...

    MycLambert 评论0 收藏0
  • React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范

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

    Hujiawei 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<