当前位置：文江博客话题详情

多部分/表单数据示例

发布于 2024-10-03 19:05:24 字数 95 浏览 1 评论 0原文

我想知道是否有人可以与我分享一个 multipart/form-data 的示例，其中包含：

一些表单参数
多个文件

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

(り薆情海 2024-10-10 19:05:24

编辑：我在以下位置保留了类似但更深入的答案：https://stackoverflow.com /a/28380690/895245

要准确了解正在发生的情况，请使用 nc -l 或 ECHO 服务器以及用户代理（例如浏览器或 cURL）。

将表单保存到 .html 文件：

<form action="http://localhost:8000" method="post" enctype="multipart/form-data">
  <p><input type="text" name="text" value="text default">
  <p><input type="file" name="file1">
  <p><input type="file" name="file2">
  <p><button type="submit">Submit</button>
</form>

创建要上传的文件：

echo 'Content of a.txt.' > a.txt
echo '<!DOCTYPE html><title>Content of a.html.</title>' > a.html

运行：

nc -l localhost 8000

在浏览器上打开 HTML，选择文件，然后单击“提交”并检查终端。

nc 打印收到的请求。 Firefox 发送：

POST / HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:29.0) Gecko/20100101 Firefox/29.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Cookie: __atuvc=34%7C7; permanent=0; _gitlab_session=226ad8a0be43681acf38c2fab9497240; __profilin=p%3Dt; request_method=GET
Connection: keep-alive
Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266
Content-Length: 554

-----------------------------9051914041544843365972754266
Content-Disposition: form-data; name="text"

text default
-----------------------------9051914041544843365972754266
Content-Disposition: form-data; name="file1"; filename="a.txt"
Content-Type: text/plain

Content of a.txt.

-----------------------------9051914041544843365972754266
Content-Disposition: form-data; name="file2"; filename="a.html"
Content-Type: text/html

<!DOCTYPE html><title>Content of a.html.</title>

-----------------------------9051914041544843365972754266--

或者，cURL 应该发送与浏览器表单相同的 POST 请求：

nc -l localhost 8000
curl -F "text=default" -F "[email protected]" -F "[email protected]" localhost:8000

您可以使用以下方法进行多个测试：

while true; do printf '' | nc -l localhost 8000; done

EDIT: I am maintaining a similar, but more in-depth answer at: https://stackoverflow.com/a/28380690/895245

To see exactly what is happening, use nc -l or an ECHO server and a user agent like a browser or cURL.

Save the form to an .html file:

<form action="http://localhost:8000" method="post" enctype="multipart/form-data">
  <p><input type="text" name="text" value="text default">
  <p><input type="file" name="file1">
  <p><input type="file" name="file2">
  <p><button type="submit">Submit</button>
</form>

Create files to upload:

echo 'Content of a.txt.' > a.txt
echo '<!DOCTYPE html><title>Content of a.html.</title>' > a.html

Run:

nc -l localhost 8000

Open the HTML on your browser, select the files and click on submit and check the terminal.

nc prints the request received. Firefox sent:

POST / HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:29.0) Gecko/20100101 Firefox/29.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Cookie: __atuvc=34%7C7; permanent=0; _gitlab_session=226ad8a0be43681acf38c2fab9497240; __profilin=p%3Dt; request_method=GET
Connection: keep-alive
Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266
Content-Length: 554

-----------------------------9051914041544843365972754266
Content-Disposition: form-data; name="text"

text default
-----------------------------9051914041544843365972754266
Content-Disposition: form-data; name="file1"; filename="a.txt"
Content-Type: text/plain

Content of a.txt.

-----------------------------9051914041544843365972754266
Content-Disposition: form-data; name="file2"; filename="a.html"
Content-Type: text/html

<!DOCTYPE html><title>Content of a.html.</title>

-----------------------------9051914041544843365972754266--

Aternativelly, cURL should send the same POST request as your a browser form:

nc -l localhost 8000
curl -F "text=default" -F "[email protected]" -F "[email protected]" localhost:8000

You can do multiple tests with:

while true; do printf '' | nc -l localhost 8000; done

回复收藏 0 原文

晒暮凉 2024-10-10 19:05:24

非常感谢@Ciro Santilli 的回答！我发现他对边界的选择相当“不高兴”，因为所有连字符：事实上，正如 @Fake Name 评论的那样，当您在请求内使用边界时，它前面还有两个连字符：

示例：

POST / HTTP/1.1
HOST: host.example.com
Cookie: some_cookies...
Connection: Keep-Alive
Content-Type: multipart/form-data; boundary=12345

--12345
Content-Disposition: form-data; name="sometext"

some text that you wrote in your html form ...
--12345
Content-Disposition: form-data; name="name_of_post_request" filename="filename.xyz"

content of filename.xyz that you upload in your form with input[type=file]
--12345
Content-Disposition: form-data; name="image" filename="picture_of_sunset.jpg"

content of picture_of_sunset.jpg ...
--12345--

I发现在此 w3.org 页面可以将 multipart/mixed 标头封装在 multipart/form-data 中，只需在 multipart/mixed 中选择另一个边界字符串并使用该边界字符串来封装数据。最后，您必须“关闭”FILO 中使用的所有边界才能关闭 POST 请求（例如：

POST / HTTP/1.1
...
Content-Type: multipart/form-data; boundary=12345

--12345
Content-Disposition: form-data; name="sometext"

some text sent via post...
--12345
Content-Disposition: form-data; name="files"
Content-Type: multipart/mixed; boundary=abcde

--abcde
Content-Disposition: file; file="picture.jpg"

content of jpg...
--abcde
Content-Disposition: file; file="test.py"

content of test.py file ....
--abcde--
--12345--

查看上面的链接。

Many thanks to @Ciro Santilli answer! I found that his choice for boundary is quite "unhappy" because all of thoose hyphens: in fact, as @Fake Name commented, when you are using your boundary inside request it comes with two more hyphens on front:

Example:

POST / HTTP/1.1
HOST: host.example.com
Cookie: some_cookies...
Connection: Keep-Alive
Content-Type: multipart/form-data; boundary=12345

--12345
Content-Disposition: form-data; name="sometext"

some text that you wrote in your html form ...
--12345
Content-Disposition: form-data; name="name_of_post_request" filename="filename.xyz"

content of filename.xyz that you upload in your form with input[type=file]
--12345
Content-Disposition: form-data; name="image" filename="picture_of_sunset.jpg"

content of picture_of_sunset.jpg ...
--12345--

I found on this w3.org page that is possible to incapsulate multipart/mixed header in a multipart/form-data, simply choosing another boundary string inside multipart/mixed and using that one to incapsulate data. At the end, you must "close" all boundary used in FILO order to close the POST request (like:

POST / HTTP/1.1
...
Content-Type: multipart/form-data; boundary=12345

--12345
Content-Disposition: form-data; name="sometext"

some text sent via post...
--12345
Content-Disposition: form-data; name="files"
Content-Type: multipart/mixed; boundary=abcde

--abcde
Content-Disposition: file; file="picture.jpg"

content of jpg...
--abcde
Content-Disposition: file; file="test.py"

content of test.py file ....
--abcde--
--12345--

Take a look at the link above.

回复收藏 0 原文

°如果伤别离去 2024-10-10 19:05:24

有一个多部分数据的示例（Angular）：

trip-upload.component.html

<form [formGroup]="form" enctype="multipart/form-data" (ngSubmit)="submitForm()">
  <div class="form-group">
    <label for="trip">Trip:</label>
    <input formControlName="name"  type="text" id="trip" name="trip" placeholder="Name of the trip">
  </div>

  <div class="form-group">
    <label for="guide">Guide for the trip:</label>
    <input formControlName="guide" type="file" id="guide" name="guide" (change)="uploadFile($event,'guide')">
  </div>

  <div class="form-group">
    <label for="photo">Guide for the trip:</label>
    <input formControlName="photo" type="image" id="photo" name="photo" (change)="uploadFile($event, 'photo')">
  </div>

  <div class="form-group">
    <button class="btn">Upload files</button>
  </div>
</form>

2.trip-upload.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from "@angular/forms";
import { HttpClient } from '@angular/common/http';
    
@Component({
  selector: 'trip-upload',
  templateUrl: './trip-upload.component.html',
  styleUrls: ['./trip-upload.component.css']
})
    
export class TripUploadComponent implements OnInit {
  public form: FormGroup;
    
  constructor(public fb: FormBuilder, private http: HttpClient) {}
    
  ngOnInit() {
    this.form = this.fb.group({
      name: [''],
      photo: [null],
      guide: [null]
    })
  }
    
  uploadFile(event, fileType: string) {
    this.updateFileFormControl(event, fileType);
  }
    
  submitForm() {
    let formData: any = newFormData();
    Object.keys(this.form.controls).forEach(formControlName => {
      formData.append(formControlName, this.form.get(formControlName).value);
    });
    
    this.http.post('http://localhost:4200/api/trip', formData).subscribe(
      (response) =>console.log(response),
      (error) =>console.log(error)
    )
  }
    
  private updateFileFormControl(event: Event, formControlName: string) {
    const file = (event.target as HTMLInputElement).files[0];
    this.form.controls[formControlName].patchValue([file]);
    this.form.get(formControlName).updateValueAndValidity()
  }
}

多部分响应

当浏览器了解您在表单中用于 HTTP POST 请求的 enctype 时，用户代理会向服务器配置名称/值对列表。根据传输数据的类型和数量，其中一种方法将比另一种更有效：

There is an example of the multipart data (Angular):

trip-upload.component.html

<form [formGroup]="form" enctype="multipart/form-data" (ngSubmit)="submitForm()">
  <div class="form-group">
    <label for="trip">Trip:</label>
    <input formControlName="name"  type="text" id="trip" name="trip" placeholder="Name of the trip">
  </div>

  <div class="form-group">
    <label for="guide">Guide for the trip:</label>
    <input formControlName="guide" type="file" id="guide" name="guide" (change)="uploadFile($event,'guide')">
  </div>

  <div class="form-group">
    <label for="photo">Guide for the trip:</label>
    <input formControlName="photo" type="image" id="photo" name="photo" (change)="uploadFile($event, 'photo')">
  </div>

  <div class="form-group">
    <button class="btn">Upload files</button>
  </div>
</form>

2.trip-upload.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from "@angular/forms";
import { HttpClient } from '@angular/common/http';
    
@Component({
  selector: 'trip-upload',
  templateUrl: './trip-upload.component.html',
  styleUrls: ['./trip-upload.component.css']
})
    
export class TripUploadComponent implements OnInit {
  public form: FormGroup;
    
  constructor(public fb: FormBuilder, private http: HttpClient) {}
    
  ngOnInit() {
    this.form = this.fb.group({
      name: [''],
      photo: [null],
      guide: [null]
    })
  }
    
  uploadFile(event, fileType: string) {
    this.updateFileFormControl(event, fileType);
  }
    
  submitForm() {
    let formData: any = newFormData();
    Object.keys(this.form.controls).forEach(formControlName => {
      formData.append(formControlName, this.form.get(formControlName).value);
    });
    
    this.http.post('http://localhost:4200/api/trip', formData).subscribe(
      (response) =>console.log(response),
      (error) =>console.log(error)
    )
  }
    
  private updateFileFormControl(event: Event, formControlName: string) {
    const file = (event.target as HTMLInputElement).files[0];
    this.form.controls[formControlName].patchValue([file]);
    this.form.get(formControlName).updateValueAndValidity()
  }
}

Multipart response

When Browser understand which enctype you use in your form for HTTP POST requests, user-agent configure list of name/value pairs to the server. Depending on the type and amount of data being transmitted, one of the methods will be more efficient than the other: