Question

我必须将.pdf文件以及其他一些详细信息作为 multipart / form-data POST请求上传到URL。我收到了邮递员请求，可以尝试同样的方法。

我有一个curl command，如下所示，我已从邮递员导出：

curl -X POST \
  https://dev.example.com/api/candidates/socially360/ \
  -H 'Content-Type: multipart/form-data' \
  -H 'Postman-Token: ee4683a0-97d2-4ac9-b2e0-1a2cef24ce7d' \
  -H 'cache-control: no-cache' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -F 'resume=@C:\Users\Thanthu Nair\Desktop\dp-converted.pdf' \
  -F 'name=Thanthu' \
  -F email=testmail@example.com \
  -F 'phone=+911234567890' \
  -F job=12345 \
  -F 'key=SECRECT_KEY'

我想使用 jQuery AJAX 发出相同的请求（或者JavaScript XMLHttpRequest也可以）。因此，我导出了jQuery AJAX代码，以实现来自邮递员的相同请求。下面是代码：

var form = new FormData();
form.append("resume", "C:\\Users\\Thanthu Nair\\Desktop\\dp-converted.pdf");
form.append("name", "Thanthu");
form.append("email", "testmail@example.com");
form.append("phone", "+911234567890");
form.append("job", "12345");
form.append("key", "SECRECT_KEY");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://dev.example.com/api/candidates/socially360/",
  "method": "POST",
  "headers": {
    "Content-Type": "multipart/form-data",
    "cache-control": "no-cache",
    "Postman-Token": "087fc592-86c7-40d0-a216-dd928fdf5a46"
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

但是在使用JQuery代码的情况下，我得到了不同的响应（也对JavaScript XMLHttpRequest 感到厌倦，并且在响应方式上与JQuery相同）。我不知道是什么问题。

此外，当我从 Chromes开发者控制台复制jQuery AJAX请求的curl命令时，我正在获得如下所示的curl，这不是问题，但可能会帮助回答。

curl "https://dev.example.com/api/candidates/socially360/" -H "Accept: */*" -H "Referer: http://localhost:8888/view/491/1558604095009_491_53" -H "Origin: http://localhost:8888" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36" -H "Content-Type: multipart/form-data" --data-binary ^"------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"resume^\^"^

^

C:^\^\Users^\^\Thanthu Nair^\^\Desktop^\^\dp-converted.pdf^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"name^\^"^

^

Thanthu^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"email^\^"^

^

testmail@example.com^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"phone^\^"^

^

+911234567890^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"job^\^"^

^

12345^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"key^\^"^

^

SECRECT_KEY^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq--^

^" --compressed

编辑： 下面是我尝试使用Postman的代码之前编写的这段代码，该代码也返回了不同的响应。

$.ajax({
        url: external.externalUrl,
        data: extData,
        cache: false,
        crossDomain : true,
        contentType: "multipart/form-data",
        processData: false,
        type: 'POST',
        success: function (res) {
            defer.resolve(JSON.parse(res));
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            defer.reject(new Error(errorThrown));
        }
});

编辑：

我还可以使用从Postman导出的Java代码进行上传，下面是代码，所以问题出在我从前端上传时：

OkHttpClient client = new OkHttpClient();

MediaType mediaType = MediaType.parse("multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW");
RequestBody body = RequestBody.create(mediaType, "------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"resume\"; filename=\"C:\\Users\\Thanthu Nair\\Desktop\\dp-converted.pdf\"\r\nContent-Type: application/pdf\r\n\r\n\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"name\"\r\n\r\nThanthu\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"email\"\r\n\r\ntest@example.com\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"phone\"\r\n\r\n+911234512345\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"job\"\r\n\r\n12345\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"key\"\r\n\r\nSECRET_KEY\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW--");
Request request = new Request.Builder()
  .url("https://dev.example.com/api/candidates/socially360/")
  .post(body)
  .addHeader("content-type", "multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW")
  .addHeader("cache-control", "no-cache")
  .addHeader("Postman-Token", "523d66c8-b4b9-4d97-a022-94b9adbfc73f")
  .build();

Response response = client.newCall(request).execute();

Answer 1

问题似乎出在服务器端，原因是当我使用编写的代码（因为我传递的是我收到的价值而未从Postman导出的代码）时，数据无法用于我在请求中传递的工作的价值。从我的数据库中（他们的数据库中不存在）。下面是该代码：

$.ajax({
        url: external.externalUrl,
        data: extData,
        cache: false,
        crossDomain : true,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function (res) {
            defer.resolve(JSON.parse(res));
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            defer.reject(new Error(errorThrown));
        }
});

但是，这并不能解释为什么粘贴来自Postman的精确代码的副本不起作用，因为它具有Postman工作的硬编码价值。

但是，自从我解决了问题以来，我正在发布此答案。

通过jQuery AJAX发送请求以上传文件时出现问题

1 个答案: