标签: form-data

不知何故我的 req.body 总是空的，也许你有一个想法：

这是我的服务器代码：

const Express = require('express');
const bodyParser = require('body-parser');

const app = new Express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/save', (req, res) => {
  console.log(req.body)  // => {}
  res.send(req.body);
});

const env = process.env.NODE_ENV || 'production';
app.listen(3000, err => {
   if (err) { return console.error(err); }
   console.info(`Server running on http://localhost:${port} [${env}]`);
});

当我尝试使用 javascript 发送 formdata 时，req.body 为空：

const data = new FormData(document.querySelector('form'));
console.log(data);  // seems empty already??? FormData{}??
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/save');
xhr.send(data); …

我有一份非常出色的工作,不得不完成最初给承包商的工作,但从未完成.不是问题但我现在被告知系统必须支持Firefox 3.6!不是很好,但不是我会失去睡眠直到现在!系统具有Ajax函数,该函数使用FormData对象,然后上载文档(通常是PDF).我通过Firefox 3.6运行了这个,我得到以下内容

"未定义FormData"
var formData = new FormData($('form')[0]);

这很好,因为我可以看到这个对象不受支持,我只需要使用不同的方法或收集方式......我用过这个:

var formData = Components.classes["@mozilla.org/files/formdata;1"]
        .createInstance(Components.interfaces.nsIDOMFormData);

但是这给了我以下错误!

http://10.29.100.23:8080的权限被拒绝获取属性XPCComponents.classes

我不确定为什么这是......道路" @mozilla.org/files/formdata;1"不正确？我做了更多的研究而且无处可去!所以我接着想到序列化表格改变了以下内容......

var formData =  {};

$.each($('form')[0].serializeArray(), function(_, kv) {
     if (formData.hasOwnProperty(kv.name)) {
         formData[kv.name] = $.makeArray(formData[kv.name]);
         formData[kv.name].push(kv.value);
     }else {
        formData[kv.name] = kv.value;
    }
});

虽然没有#t错误,Ajax函数没有上传(我认为它没有识别或找到文件,或者它只是为文件值收集一个字符串).有没有人对旧版浏览器中FormData的替代品有任何建议,尤其是Firefox 3.6--这是我唯一需要支持的旧浏览器.

** 更新 ****

这是HTML页面上表单的内容

<form action="" method="post" enctype="multipart/form-data" name="uploadForm" id="uploadForm" target="#">
    <label for="fileField">Rechnung hochladen</label>
    <input type="file" name="fileField" id="fileField">
    <progress id="progressbar" class="progressbar_margin hidden"></progress>
</form>

我正在尝试使用JavaScript制作XHR,但我无法让它正常工作.

当我在Chrome开发者工具的"网络"标签中看到正确的请求时,我看到他们有一个"表单数据"部分,其中列出了随请求一起发送的所有信息,如下所示:

现在,我已经尝试XMLHttpRequest以我知道的任何方式制作我,但我无法得到那个结果.

我试过这个:

var xhr = new XMLHttpRequest(),
    form_data = "data%5Btumblelog%5D=drunknight&data%5Bsource%5D=FOLLOW_SOURCE_REBLOG";
    // this is uri encoded: %5b = [ and %5D = ]

xhr.open('POST','https://www.somesite.com/page?' + form_data, false);
xhr.send();

但我得到了这个"查询字符串参数"而不是"表单数据":

我也试过这个:

var xhr = new XMLHttpRequest(),
    formData = new FormData();

formData.append("data[tumblelog]", "drunknight");
formData.append("data[source]", "FOLLOW_SOURCE_REBLOG");
xhr.open('POST','https://www.somesite.com/page', false);
xhr.send(formData);

但我得到了"请求有效负载"而不是"表单数据":

最后,我试过这个:

var xhr = new XMLHttpRequest(),
    formData = {
        "data[tumblelog]": "drunknight",
        "data[source]": "FOLLOW_SOURCE_REBLOG"
    };

xhr.open('POST','https://www.somesite.com/page', false);
xhr.send(JSON.stringify(formData));

但我得到另一个"请求有效负载"而不是"表单数据":

现在,我的问题是:

如何发送我XMLHttpRequest的信息以获得与FIRST图像中显示的相同的结果？

我有一个jpeg作为base64编码的字符串.

var image = "/9j/4AAQSkZJRgABAQEAS..."

我想使用FormData将此jpeg上传到服务器.

var data = new FormData();

将图像附加到数据的正确方法是什么？

我目前正在使用multer用于multipart/form-data在Node.js应用程式与旁边身体解析器.

我想POST使用邮差形式的数据,但得到这个错误.

Error: invalid json
    at parse (/Users/k/Documents/application/node_modules/body-parser/lib/types/json.js:79:15)
    at /Users/k/Documents/application/node_modules/body-parser/lib/read.js:102:18
    at IncomingMessage.onEnd (/Users/k/Documents/application/node_modules/body-parser/node_modules/raw-body/index.js:136:7)
    at IncomingMessage.g (events.js:199:16)
    at IncomingMessage.emit (events.js:104:17)
    at _stream_readable.js:908:16
    at process._tickDomainCallback (node.js:381:11)

这就是我在server.js中添加multer和body-parser的方法

var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var multer = require('multer');

var app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(multer({ dest: './uploads/'}));

我想这可能是因为闷闷不乐.当我删除body-parser并再次尝试时,它会显示空的json for console.log(req.body)和console.log(req.files).

注意:body-parser版本是1.12.0,multer版本是0.1.8.

我很沮丧，找不到解决方案：

我正在使用 angularjs 和 nodejs 创建一个项目。我从 node js 中的 angular 端获取图像数据并将此数据发送到进一步的 api。我收到错误

{
  "error": {
    "detail": "Multipart form parse error - Invalid boundary in multipart: None"
  }
}

这是我在 nodejs 端的代码：

var request = require('request');
    console.log(req.files);
var data = {

        website:'www.gamail.xom',
        contact_number:'dsdsd',
        services_offered:'dsadasd',
        contact_name:'dasdas',
        provider_category:'exchange',
        email:'kk@gmail.com',
        image:req.files

    }
var api_url = global.common.base_url + 'vcard/1.0.0/visit_card/' + req.param('uuid') +'/';
    request({
        url: api_url,
        method: 'PUT',
        headers: {
            'Content-Type': 'multipart/form-data',
            'Authorization': 'Bearer '+req.cookies.apitoken
        },
        json: data

    }, function(error, response, body) {
        if(response.statusCode == 200 …

我正在尝试将带有Angular2的图片上传到我的REST服务(Loopback).Loopback服务工作(使用Postman测试)并接受带有x-www-form-urlencoded标头的文件.

这是一个发送POST请求的简化服务方法:

public uploadFile(url : string, file: File): Observable<any> {
  let headers: Headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  let formData = new FormData();
  formData.append('file', file);

  let options: RequestOptionsArgs = { headers: headers };

  return this.http.post(url, formData, options)
  .map((res: any) => (res.text() != "" ? res.json() : {}));
}

请注意,我已将标头设置为application/x-www-form-urlencoded,并在正文中发送包含该文件的formData.

在Angular中,直到我http.post请求的位置,formData填充了文件,文件内容存在,每个都很好:

请求前的数据

但在请求中,正文是一个空对象{}:

请求

我假设,Angular试图做JSON.stringify(formData),至少,当我尝试这个时,我也得到"{}"作为输出.

我已经看到很多帖子完全相同(http.post(url,formData)).那我错过了什么？

 public List<Region> Regions { get; set; }

在名为News.An Region Model的模型中

public class Region
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public static Region Parse(DataRow row)
        {
            return new Region
            {
                Id = Database.GetInteger(row["Id"]),

                Name = Database.GetString(row["Region"]),


            };
        }
    }

在Javascript中我使用带有formdata的AJAX post方法.我想设置这个区域.

var regionList = [];
            if (selected === "region") {
                if (region.length <= 0) {
                    toastr.warning('Lütfen en az bir bölge seçin !!!');
                    return;
                }

                for (var i = 0; i < region.length; …

我有以下javascript从画布生成图像并将它们上传到服务器.

var can = document.createElement('canvas');
can.width = 600;
can.height = 600;
var ctx = can.getContext('2d');
ctx.fillRect(0, 0, can.width, can.height);
ctx.fillText("Julia", can.width/2, can.height/2);
can.toBlob(uploadImage, "image/jpg", 0.9);

function uploadImage(jpeg) {
  var data = new FormData();
  data.append('image', jpeg, 'image.jpg');
  ...
}

每隔一段时间,结果看起来就像上面一样,只是部分绘制的.多个画布按顺序处理和上传,仅在完成ajax(在......部分)中继续进行,因此一次只能进行一次.

你看到过这种情况吗？如果是这样,我应该在这个过程中进一步调试？可能是上下文对象中的设置或其他内容？

编辑

上传是一个ajax帖子,只在成功分支上解析了一个promise.它实际上使用angular的$ http服务:

$http({method: 'POST', url: '...', data: data}).then(function(response) {
    // callback that processes and uploads the next image
});

我是 React Native 的新手，遇到了 FormData 的行为与预期不同的问题。我的代码：

let fileToSend = new FormData();
    fileToSend.append('File', {
    name: 'file.name',
    size: 'file.size',
    type: 'file.type',
    uri: 'file://',
});

我期望得到这样的东西：

fileToSend = {File: [
   name: 'file.name',
   size: 'file.size',
   type: 'file.type',
   uri: 'file://',
]}

但实际上我得到了这个：

fileToSend = [_parts: [
   0: [
     0: 'File',
     1: {
       name: 'file.name',
       size: 'file.size',
       type: 'file.type',
       uri: 'file://',
        }
]]]

这使得我无法将文件发送到服务器。将非常高兴得到您的帮助。谢谢。