1. 使用方式

1.1 html 表单点击提交

enctype=“multipart/form-data”, method=post, type=“file” 。根据 rfc1867, 这三个属性是必须的。multipart/form-data 是新增的编码类型，以提高二进制文件的传输效率。

<form action="upFile.php" enctype="multipart/form-data" method="post">
<input name="myflie" type="file" />
<input type="submit" />

1.2 通过api 提交文件

通过FormData 对象将文件数据传入。
content-type 设置为false 或者不写。浏览器会自动识别为multipart/form-data;并设置boundary 分割符号

    // FormData创建const formData = new FormData();formData.append('file', blob);formData.append('updateMode', 'false');// api调用const httpOptions = {headers: new HttpHeaders({// 'Content-Type': 'multipart/form-data', 自动会生成Content-TypeAuthorization:  sessionStorage.getItem('Authorization')})};this.http.post(``, formData, { observe: 'response', ...httpOptions }).pipe(catchError(this.shareService.handleError()));

2. 概念

在最初的 http 协议中，没有上传文件方面的功能。 rfc1867为 http 协议添加了这个功能。客户端的浏览器，如 Microsoft IE, Mozila, Opera 等，按照此规范将用户指定的文件发送到服务器。服务器端的网页程序，如 php, asp, jsp 等，可以按照此规范，解析出用户发送来的文件。Microsoft IE, Mozila, Opera 已经支持此协议，在网页中使用一个特殊的 form 就可以发送文件。绝大部分 http server ，包括 tomcat ，已经支持此协议，可接受发送来的文件。各种网页程序，如 php, asp, jsp 中，对于上传文件已经做了很好的封装。

3. multipart-formdata 作用

为了上传文件，等二进制流

4. boundary 分割符号

4.1自定义boundary

给文件流设置分隔符
给content-type 设置同样的分割符

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body>
<input type="file" id="file">
<button id="trigger">trigger</button>
<script type="text/javascript">var file = document.getElementById("file");var trigger = document.getElementById("trigger");trigger.addEventListener("click", function(e){var reader = new FileReader();reader.readAsDataURL(file.files[0].slice());reader.addEventListener("loadend", function(e){req = new XMLHttpRequest();req.overrideMimeType("text/plain");req.addEventListener("load", function(e){var img = document.createElement("img");img.src = e.target.response;document.body.appendChild(img);}, false);req.open("post", "./tmp_50.php");var sBoundary = "---------------------------" + Date.now().toString(16);req.setRequestHeader("Upgrade-Insecure-Requests", "1");req.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);var data = new Blob(["--" + sBoundary + "\r\n" + "Content-Disposition: form-data; name=\"payload\"; filename=\"payload.data\"" + "\r\n" + "Content-Type: application/octet-stream" + "\r\n" + "\r\n", reader.result, "\r\n" + "--" + sBoundary + "--" + "\r\n"], {type : 'application/octet-stream'});req.send(data);});

4.2 浏览器自动生成分隔符

不设置 content-type 浏览器就会自动识别，并生成

  headers: new HttpHeaders({// 'Content-Type': 'multipart/form-data',Authorization:  sessionStorage.getItem('Authorization')})

前端上传文件，multipart-formdata，boundary的使用相关推荐

http 协议上传文件multipart form-data boundary 说明--转载
原文地址:http://xixinfei.iteye.com/blog/2002017 含义 ENCTYPE="multipart/form-data" 说明: 通过 http ...
Python Request POST 上传文件 Multipart/form-data
项目场景: 我的第一个博客:使用python request模块向服务器接口上传图片问题描述某app上传图片接口的包原因分析: 问题的关键词:请求头 Content-Type:multipart ...
关于前端上传文件到后台，文件大小超出限制，导致上传失败的解决办法。
文章出处:Jiangkuobo,微信:jkb_267460 文章目录前言一.使用elementPlus上传图片,出现的问题. 二.验证猜想 1.验证方式: 2.测试结果: 3.我的猜想与验证三. ...
html5封装图片,简单封装前端上传文件/图片
前言最近项目会一直用到各种类型的上传文件的功能, 所以就基于elment-ui简单的做了一个封装, 比较好用正文引入 import TestUpload from '../components/ ...
关于前端上传文件到七牛云的一些笔记
关于前端上传文件到七牛云的一些心得前言申请账户具体步骤算了小技巧七牛云没有监控上传进度和上传错误的 API ?(JS SDK) React 更新 state 中的数组不能触发动画效果? 前 ...
关于使用jQuery前端上传文件
关于使用jQuery前端上传文件我们都知道 html中file类型的input可以直接读取本地的文件; 如果使用form表单的话,那么action = url 这就会上传完文件会刷新页面,返回值就会 ...
前端上传文件status状态为0？
前端上传文件 status=0 ??? status状态码基本上是 100.200.300.400.500 , 0 还是第一次遇到过 status为0说明接口在调用之前,就已经取消了.也就是说根 ...
vue method ajax上传文件,前端上传文件追根溯源_和_antd_vue上传文件实例
背景平,过现前个能文使近记接的端问对字用近记接时工作中经常会遇到需要上传文件的情况,如果你用ant design 或者element ,它们都提供了上传的组件. 我们分别来看一下element 和 ...
【转载】前端上传文件，python作为后端接收并保存到本地--Tornado上传文件--分片上传文件--更换pip下载源
背景:在改造caffe自带demo时,增加了一个更新模型的功能,需要将用户训练好的caffemodel上传到服务器,并替换到已经存在的caffemodel文件,重新加载上传的caffemodel文件并 ...

前端上传文件，multipart-formdata，boundary的使用

上传文件需要使用 Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryFIc14z39Lb6Leu6y ;