如何让上传的请求携带其他参数信息？

[2betop]

目前有两种设置的方法。

1. 全局设置，就是每个文件上传的时候都会携带的。通过修改options.formData来控制。比如如下demo添加一个uid=123。

   // 初始化的时候直接添加
   var uploader = new WebUploader.Uploader({
       ...
       formData: {
           uid: 123
       }
       ...
   });
   
   // 初始化以后添加
   uploader.options.formData.uid = 123;

2. 局部设置，给每个独立的文件上传设置。通过绑定一个uploadBeforeSend事件来添加。

   uploader.on( 'uploadBeforeSend', function( block, data ) {
       // block为分块数据。
   
       // file为分块对应的file对象。
       var file = block.file;
   
   
       // 修改data可以控制发送哪些携带数据。
       data.uid = 123;
   
       // 将存在file对象中的md5数据携带发送过去。
       // data.fileMd5 = file.md5;
   
       // 删除其他数据
       // delete data.key;
   });

[litterGuy]

您好 多谢您的回复 在全局设置时 “ 初始化的时候直接添加” 这种方式无法获取到参数 “初始化以后添加”这种方式则可以获取到。。请问要怎么修改？

[2betop]

你是要在初始化以后全局添加某些参数吗？
有两种方式：

1. 直接修改实例的options属性。

   uploader.options.formData.uid = 123;

2. 通过option方法

   uploader.option('formData', {
     uid: 123
   });

[litterGuy]

我想在初始化的时候直接设置全局变量 ，通过这种方式后台无法获取到
formData: {
uid: 123
}
初始化以后添加参数倒是可以获取到

[2betop]

我这测试是OK的，你是不是你哪弄错了？

[litterGuy]

3q 问题解决了 我也不知道哪里写错了。。。

[songshuaijin]

这个uid参数 如果后台是java 该如何获取 我怎么request得不到

[huangjingxun]

请问，如果发送的参数是数组类型，是不是此参数会用JSON转码为字符串格式？
实际调用中我发现是如此：
-------------WebKitFormBoudary......-----------
Content-Dispositition: form-data; name="ids"

1,2,3
-------------WebKitFormBoudary......-----------

但是我想要通常的格式，如下：
-------------WebKitFormBoudary......-----------
Content-Dispositition: form-data; name="ids"

1
-------------WebKitFormBoudary......-----------
Content-Dispositition: form-data; name="ids"

2
-------------WebKitFormBoudary......-----------
Content-Dispositition: form-data; name="ids"

3
-------------WebKitFormBoudary......-----------

该如何操作

[huangjingxun]

搞定了，是formdata的append方法只能的value值只能是BLOB,FILE,STRING三种类型，官方是这样说的
The field's value. Can be a Blob, File, or a string, if neither, the value is converted to a string.
所以如果传数组就要把数组里的元素依次append才行.

[2betop]

欢迎提 pull request 哈

[dolphin836]

服务器端如何得到这个formData的数据呢？例如我设置了
formData: {
text: 'xixi'
},
怎么得到这个值啊？
PHP啊

[2betop]

分两种情况

1. 默认上传在 $_POST 数据里面
2. 二进制流式上传在 $_GET 数据里面

[dolphin836]

获取到了 谢谢大侠。这个回复不会刷新么。我一直以为没有回复成功。~~~~

[dolphin836]

当我使用如下设置的时候

formData: {
pic_title: $('#title').val(),
pic_album: '2'
},
发现$_POST['pic_title']的值为空
后来发现是因为在页面加载的时候input的值还没有填写
这时候就加载upload.js设置了formData，所以pic_title的值为空
我现在的做法是先加载页面，选择了图片后再显示表单（和上传按键 继续添加按键一样）
接着填写表单数据，然后上传。
是不是应该在表单填写数据之后再设置formData的值？

[dolphin836]

uploader.options.formData.uid = 123;
初始化以后添加的话应该添加在什么位置呢？
上传开始前？
case 'uploading':
$( '#filePicker2' ).addClass( 'element-invisible' );
$progress.show();
$upload.text( '暂停上传' );
break;
这个地方么？

[vitoleefilm]

我想在分块传送文件时将它的MD5值也传过去，该怎么做呢？

[vitoleefilm]

我如何在读取了文件的MD5值后再通过formdata传到服务端呢？我现在的方法是放到session里，但如果是传多个文件的话前一个的值容易被后面一个覆盖掉。

[sky20054122]

/**
         * 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。 
         * block {Object}
         * data {Object}默认的上传参数，可以扩展此对象来控制上传参数。
         * headers 可以扩展此对象来控制上传头部。
         */
        uploader.on('uploadBeforeSend', function(block, data, headers) {
             // block为分块数据。

            // file为分块对应的file对象。
            var file = block.file;
            var fileMd5 = file.wholeMd5;
            // 修改data可以控制发送哪些携带数据。
            data.fileMd5 = fileMd5;
            //data["fileMd5"] = fileMd5;

            // 将存在file对象中的md5数据携带发送过去。
            // data.fileMd5 = file.md5;

            // 删除其他数据
            // delete data.key;
            if(block.chunks>1){ //文件大于chunksize 分片上传
                data.isChunked = true;
            }else{
                data.isChunked = false;
            }

            data.chunkMd5 = block.chunkMd5;
           // var me = this;
            //me.options.server = baseUrl + '/fileUpload/chunkUpload'+"/"+block.chunk+"/"+block.chunks;

            //console.log("uploadBeforeSend: block.file.size="+block.file.size);
            insertLog("<br>"+moment().format("YYYY-MM-DD HH:mm:ss")+" uploadBeforeSend:文件"+file.name+"  分片"+block.chunk+"/"+block.chunks);
        });

[pumbac]

@LSL1618

谢谢。试了一下，用formData上传参数不成功。
用plupload的multipart_params就能正确上传。
（服务端是别人写的。。。）
应该咋办呢？

[LSL1618]

@pumbac ，服务端你能看到源码吗？能看到的话你可以跟踪一下，看下你传的参数是否到了服务端，还是到了服务端但是取参数没取出来，或者取参数的方式不对导致没取出来。

[zengAlex]

请问，在实例化后怎么去动态的改变server 的地址表单提交后，返回的地址，怎么把返回的地址作为server 的地址

[sirius1024]

@zengAlex

var up = WebUploader.create({server:'123.com'});
up.options.server = "456.com";

可以在上传成功的callback里，修改实例的值。
建议在浏览器里新建一个实例，然后输出看看实例的结构。

[zengAlex]

不行...我是要另外一个表单请求后返回一个地址，但是在实例化后拿不到这个地址，他总是请求 到表单的地址

[zengAlex]

不行...我是要另外一个表单请求后返回一个地址，但是在实例化后拿不到这个地址，他总是请求 到表单的地址@SiriusGuo

[pumbac]

@LSL1618
已搞定。是我传的方式有点问题。谢谢。

[sirius1024]

@zengAlex
我没有明白你的问题，是你用wu上传一张图，服务器给你返回的地址，然后你要用这个地址当作wu的server地址么？
那流程应该是
wu实例化->post图到服务器->服务器返回url->wu回调拿到url->wu修改server地址
整个过程页面的生命周期还在呢，不会有刷新呀。

[zengAlex]

不是，是我上传了表单的数据，然后表单请求的返回一个地址给我。我再去改变wu的请求地址，在这个过程中表单跟图片的上传相差一秒执行

[zengAlex]

不是，是我上传了表单的数据，然后表单请求的返回一个地址给我。我再去改变wu的请求地址，在这个过程中表单跟图片的上传相差一秒执行@siriguo

[LSL1618]

@zengAlex ，你可以先用ajax来提交表单数据，然后在ajax的回掉中获取提交表单后返回的地址，然后把地址赋值给uploader.options.server，最后执行文件上传就好了。

[onweer]

Node.js 使用express 要如何得到 form-data 上传的参数 ？？？

[LSL1618]

不会Node.js。

[wangshuaiyx]

请问如何获取和携带拖拽上去的文件夹名称？

[LSL1618]

@wangshuaiyx ,不支持文件夹上传的吧!

[wangshuaiyx]

@LSL1618 拖拽上传是支持直接拖文件夹上传的

[LSL1618]

@wangshuaiyx ，哦，我说呢，只有拖拽上传是支持的啊！

[wangshuaiyx]

@LSL1618 是的，我想按拖拽上去的文件夹结构来存储文件，但是读不到文件所在的文件夹名称，就像QQ传文件那样，拖个文件夹过去，接收的时候会按拖入的文件夹结构存储文件，包括拖入文件夹的子文件夹，哪位大仙做过啊

[LSL1618]

@wangshuaiyx ，我没弄过，你可以根据文件路径试试。

[zengAlex]

你好，请问为什么为这里不返回md5值的尼？

[jianghfjy]

你好，我也遇到携带数据的时候后台接收不到数据的情况，在初始化的时候传数据和在上传之前传数据都试过了，后台接收不到数据。
uploader.options.formData.RESOURCE_NAME = "JIANG"; uploader.options.formData.RESOURCE_VERSION = "2.0"; //开始上传 uploader.upload();

formData :{ RESOURCE_NAME:"JIANG", RESOURCE_VERSION:"2.0" }

[chenlinsoft]

webuploader 跨域访问不了，在JS中设置了
uploader.on('uploadBeforeSend', function(obj, data, headers) {
$.extend(headers, {
"Origin": "http://192.168.0.2:8181",
"Access-Control-Request-Method": "POST"
});
});

服务端：
response.setHeader("Access-Control-Allow-Origin", "");
response.setHeader("Access-Control-Allow-Methods", "");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");

但是依然报错：XMLHttpRequest cannot load http://192.168.0.2:8181/fileUpload/uploadMultiFile/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

各位有啥好的可用方案不？

[phpluo]

后台收不到上传参数 @2betop @litterGuy @songshuaijin @huangjingxun @dolphin836

[LSL1618]

@zengAlex ，MD5要你自己计算然后放到请求参数里边的。

[huoyingluoye]

我现在的情况是这样的，多个文件一次上传。但是每个文件上传的时候，都要有自己的一个信息。我目前是这样处理的

在提交的时候，遍历下，然后获取这个fileType。但是问题是，在遍历的时候，可以看到，uploader这个实例的option是正确的，是这个文件的fileType，但是在post的时候，发现所有文件的fileType都变成最后一个文件的fileTyp


请问 这种情况，我需要怎么来解决，谢谢 @2betop @dolphin836 @litterGuy @songshuaijin

[pangbooo]

node express 在哪个参数接受值

[DamonChenXL]

formData这个数据类型可以单独传一个数组么 如何设置

[13632225945]

当不选中文件的时候，也希望请求能够提交，应该怎么做呢

[fengxingaotian]

这个上传自带的文件参数，id，name，size，type实际有时候是不需要的，就像楼上的 @huoyingluoye 那个一样，会出现重名参数，我在上传发送前处理那些参数居然处理不掉
uploader.onUploadBeforeSend = function(object, data, headers) {
data = {};
};
文档写的是data是可扩展参数，试了试，计算只能往里面添加参数，干掉原来的干不掉，即使这么写了，他还是要把那些参数上传上去，这就很郁闷，他用的那些参数名还都是关键名称，不知道你们怎么处理。

这就是上传参数
------WebKitFormBoundaryf1xayfT6egVdaKh5
Content-Disposition: form-data; name="id"

WU_FILE_1
------WebKitFormBoundaryf1xayfT6egVdaKh5
Content-Disposition: form-data; name="name"

idcard.jpeg
------WebKitFormBoundaryf1xayfT6egVdaKh5
Content-Disposition: form-data; name="type"

image/jpeg
------WebKitFormBoundaryf1xayfT6egVdaKh5
Content-Disposition: form-data; name="lastModifiedDate"

Thu Nov 08 2018 14:36:21 GMT+0800 (中国标准时间)
------WebKitFormBoundaryf1xayfT6egVdaKh5
Content-Disposition: form-data; name="size"

37730
------WebKitFormBoundaryf1xayfT6egVdaKh5
Content-Disposition: form-data; name="file"; filename="idcard.jpeg"
Content-Type: image/jpeg