V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
TomatoYuyuko
V2EX  ›  问与答

JS 里怎么构造 FilesList 对象?

  •  
  •   TomatoYuyuko · 2018-07-03 15:04:12 +08:00 · 3603 次点击
    这是一个创建于 2324 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想要实现图片可以分先后上传多张(不设置数量上限) 最后 submit 的时候打包成一个数组用 formdata 上传,但是 java 底层好像只能从 FilesList 里解析出 File,用数组的话拿不出来?不是很懂,从前端有方法手动 new 一个 FilesList 么,这个好像是只读的。 有什么推荐的方法么。

    8 条回复    2018-07-07 23:39:57 +08:00
    yimity
        1
    yimity  
       2018-07-03 15:39:29 +08:00 via Android   ❤️ 1
    formData append
    TomatoYuyuko
        2
    TomatoYuyuko  
    OP
       2018-07-03 15:48:11 +08:00
    @yimity 这是最后一步,我的意思是 append 的是一个 File 对象没问题,如果是多个文件怎么 append,java 好像只能解析 FilesList 对象里的 File 对象,用 Array 装 File 就没法识别?
    TomatoYuyuko
        3
    TomatoYuyuko  
    OP
       2018-07-03 15:49:25 +08:00
    排除每个 File 都对应 append 独立一项的做法,因为文件可能有非常多个
    mars0prince
        4
    mars0prince  
       2018-07-03 16:00:22 +08:00   ❤️ 1
    readAsBinaryString 自己加分隔符自己拼
    haocity
        5
    haocity  
       2018-07-04 09:20:07 +08:00   ❤️ 1
    我是用户上传一张图片上传一次 只保存上传图片返回的 ID 最后提交把 ID 数组返回
    flowfire
        6
    flowfire  
       2018-07-04 10:44:04 +08:00 via iPhone   ❤️ 1
    Object.setProptypeOf 试试?
    TomatoYuyuko
        7
    TomatoYuyuko  
    OP
       2018-07-04 15:17:42 +08:00
    @flowfire 可行!感谢 dalao !
    yimity
        8
    yimity  
       2018-07-07 23:39:57 +08:00   ❤️ 1
    @TomatoYuyuko 如果是多个文件。 则:
    selectedFiles 是数组,是 input type=file 选择出来的 file 对象( input onchange 之后 的 event.target.files[0])。
    const formData = new FormData();

    if (selectedFiles.length) {
    selectedFiles.forEach((file) => {
    formData.append('Files', file, file.name);
    });
    }

    formData.append('Files', 12345);
    formData.append('Files', 67890);

    只要是 append 的,都会新增,不会覆盖。append 第一个参数一样的,也不会覆盖。相同的文件传两遍也不会覆盖,不是文件也不会覆盖。

    Request payload 就是

    ------WebKitFormBoundaryUJdNWWlo0O7Pwhcn
    Content-Disposition: form-data; name="Files"; filename="name1.jpg"
    Content-Type: image/jpeg


    ------WebKitFormBoundaryUJdNWWlo0O7Pwhcn
    Content-Disposition: form-data; name="Files"; filename="name2.jpg"
    Content-Type: image/jpeg


    ------WebKitFormBoundaryUJdNWWlo0O7Pwhcn
    Content-Disposition: form-data; name="Files"; filename="name1.jpg"
    Content-Type: image/jpeg


    ------WebKitFormBoundaryUJdNWWlo0O7Pwhcn
    Content-Disposition: form-data; name="Files"

    12345
    ------WebKitFormBoundaryUJdNWWlo0O7Pwhcn
    Content-Disposition: form-data; name="Files"

    67890
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1038 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:47 · PVG 03:47 · LAX 11:47 · JFK 14:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.