前端如何将pdf等文件传入后端

我们知道在js中我们可以通过：

<input type="file" name="file" id="fileInput" accept="image/*">

来输入文件。其中type指后端url，accept来限制传入类型。

前端通过表单形式将其传入后端

那么前端是怎么将这一整个文件打包传入后端的呢？

原来前端通过文件上传表单的方式将文件传输到后端。这通常涉及使用 HTML 的<form>元素和<input type="file">输入框，以及设置适当的表单属性来支持文件上传。

[这里是图片001]

Payload截图

可以看到我在使用ant design vue框架时其文件传输的内容包含状态，上传时间，文件名字等。

文件上传的流程：

1. 用户在文件输入框中选择一个文件。
2. 用户点击提交按钮，浏览器将会把表单数据（包括选定的文件）打包成multipart/form-data格式的请求体。
3. 请求被发送到指定的后端URL（在这个例子中是/upload）。
4. 后端接收到请求后，可以通过相应的框架或库来解析multipart/form-data，获取到文件数据，并进行进一步处理，例如保存文件到服务器或者进行文件内容分析等操作。

文件上传表单示例：

<form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput">
    <button type="submit">上传文件</button>
</form>

解释：

• <form>元素定义了一个表单，其中：
  • action="/upload"指定了表单提交的目标后端URL。
  • method="POST"指定了使用POST方法提交表单。
  • enctype="multipart/form-data"表示表单中包含文件上传，这是必需的，因为文件上传需要使用multipart/form-data类型来传输文件数据。
• <input type="file" name="file" id="fileInput">是文件上传的输入框，其中：
  • type="file"表示这是一个文件输入框，允许用户选择文件。
  • name="file"指定了后端接收文件时的字段名称，这个名称在后端处理文件时很重要。
  • id="fileInput"可以用来通过 JavaScript 获取文件输入框的引用，以便在用户选择文件后执行一些操作（例如显示文件名或大小）。
• <button type="submit">上传文件</button>是一个提交按钮，点击它会触发表单提交操作。

后端处理文件上传的例子：

• Node.js（使用 Express 框架）：

  const express = require('express');
  const multer = require('multer');
  const upload = multer({ dest: 'uploads/' });
  
  const app = express();
  
  app.post('/upload', upload.single('file'), (req, res) => {
      const file = req.file;
      // 处理文件，例如保存到服务器或者返回其他响应
      res.send('文件上传成功');
  });
  
  app.listen(3000, () => {
      console.log('服务器运行在 http://localhost:3000');
  });
  

  在这个例子中，使用了multer中间件来处理单个文件上传，upload.single('file')表示期望接收一个名为file的文件字段。

• PHP：

  <?php
  $target_dir = "uploads/";
  $target_file = $target_dir . basename($_FILES["file"]["name"]);
  $uploadOk = 1;
  
  if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
      echo "文件上传成功";
  } else {
      echo "文件上传失败";
  }
  ?>
  

  PHP 示例使用了$_FILES超全局数组来接收上传的文件，并使用move_uploaded_file()函数将文件从临时位置移动到指定的目标位置。

用JS将文件传入后端

上面以及展示了html文件上传表单的示例，下面再展示通过JavaScript监听文件选择事件来传递。

html

<div>
    <input type="file" id="File">
    <button>点击上传文件</button>
</div>

JS绑定事件

document.querySelector('button').addEventListener('click', e => {
	let fileList = document.querySelector('#File').files
})
let fd = new FormData()
fd.append('aaa',fileList[0])

如果接口文档要求传递请求体(包括Content-Disposition, Content-Type等)我们使用window提供的FormData构造函数来实例化一个表单类型。

axios传递

axios({
	url: '',
	method: 'POST',
	data: fd
}).then(res => {
	console.log(res);
})

通过ajax就可以将文件传入后端。