Question

我正在尝试使用ajax请求将包含多个文件的zip从客户端发送到服务器。 zip在javascript中编码为Base64字符串，并作为post参数传递

Javascript代码：

            var fileUp = document.getElementById("wsFile");
            var file = fileUp.files[0];

            var array = new Array();
            array = file.name.split(".");


            var reader = new FileReader();
            reader.readAsDataURL(file);

            if(array[array.length-1]=="zip" && file.size<=10000000){

                var xhr = new XMLHttpRequest();
                xhr.open("POST", "X",true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");


                 xhr.onreadystatechange = function() {
                     if(xhr.readyState == 4 && xhr.status == 200) {
                         dojo.byId("content").innerHTML=xhr.responseText;
                     }
                 }
                 reader.onload = function(){
                     var params = "file="+ reader.result+"&fileName="+file.name;
                     xhr.send(params);
                };

}

服务器端（Spring MVC）：

@RequestMapping(value = "/X", method = RequestMethod.POST)
    public String X(@RequestParam("file") String file, @RequestParam("fileName") String fileName, Locale locale, Model model) {


            System.out.println(file);

            byte[] decoded = Base64.decodeBase64(file);

            System.out.println(decoded);


            File folder = new File("C:\\MTT");
            if(!folder.exists()){
                folder.mkdir();
            }

            File f = new File("C:\\MTT\\"+fileName);



try {
                    FileOutputStream fos = new FileOutputStream(f);
                    fos.write(decoded);
                    fos.close();
                } catch (FileNotFoundException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }

到目前为止，ajax请求成功，服务器收到客户端发送的相同Base64字符串。但是，当我尝试解压缩zip中的文件时，我收到了一个损坏的存档消息。

我做错了什么或者这是zip档案的限制？抱歉任何天真，但我从来没有这样做过

Answer 1

查看您的代码，我相信您没有发送您认为发送的内容！

这是由于这两行

reader.readAsDataURL(file);
// and later
var params = "file="+ reader.result+"&fileName="+file.name;

考虑; readAsDataURL实际产生了什么？ e.g。

var b = new Blob(['Hello World!'], {type: 'text/plain'}),
    fr = new FileReader();
fr.onload = function () {console.log(this.result);};
fr.readAsDataURL(b);
// data:text/plain;base64,SGVsbG8gV29ybGQh

即。您的reader.result不只是 Base64 数据，因此不完全是您想要的

var base64Data = reader.result.slice(reader.result.indexOf(',') + 1);
var params = "file=" + base64Data + "&fileName=" + file.name;

请注意，我示例中的 Base64 比其所代表的文字更长。这将永远为真，因此您可能需要考虑将文件作为二进制文件发送;只需将file直接传递到send，其内容类型为： application / octet-stream ，但这也意味着您的服务器代码也需要更改，以及它的反应方式。

Answer 2

我相信发送zip文件时，OCTET流应该用作内容类型。您的代码中的另一个问题是您只是将文件名作为输入。但要接收文件，您应该拥有该文件的输入流。您还应该发送文件内容而不仅仅是文件名。

如果您需要使用文件元数据和实际文件内容等请求发送多个表单参数，则应考虑使用Multipart / form或Multipart / mixed内容类型。

这是一个使用jersey框架发送文件的好教程。无论您使用什么框架，但您可以从示例中学习：

http://www.mkyong.com/webservices/jax-rs/file-upload-example-in-jersey/

通过POST将ZIP文件发送到Base64中的服务器

2 个答案: