前端如何将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就可以将文件传入后端。

相关推荐
吞掉星星的鲸鱼25 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6628 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
hello_simon1 小时前
在线小白工具,PPT转PDF支持多种热门工具,支持批量转换,操作简单,高效适合各种需求
pdf·html·powerpoint·excel·pdf转html·excel转pdf格式
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript