怎么实现上传文件夹并且只调用一次接口？

Question

要实现一个效果，上传这个文件夹中的所有的文件，我已经用vue-simple-upload这个插件实现了，但是现在是上传一个文件请求一次，怎么把它一个接口上传多个文件，求解。

Answer 1

用FormData加入你所有文件，一次性就能发送。但是如果文件大可能超出你服务器端的最大上传数据限制导致报错。。

FormData参考：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
上传可以用ajax，但是需要注意FormData的处理，不能转键值对.
简单示例

<input type="file" multiple onchange="uploadfile(this)"/>
<script>
    function uploadfile(f) {
        var files = f.files, fd = new FormData()
        for (var f of files) {
            fd.append(f.name, f);
        }
        var xhr = new XMLHttpRequest;
        xhr.open('post', 'savefile.ashx');
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (200 == xhr.status) {
                    alert(xhr.responseText);
                }
                else alert('发生错误\nstatus:' + xhr.status + '\n返回内容:' + xhr.responseText);
            }
        }
        xhr.send(fd)
    }
</script>

有帮助或者启发麻烦点个采纳【本回答右上角】，谢谢~~