javascript - Extjs:使用提交表单上传文件

Question

我正在尝试使用 ExtJs 和 Spring 上传文件 (excel)，但没有成功，所以我希望你能帮助我。在面板中，我有一个按钮 (fileuploadfield)，然后我选择了一个我想要上传的文件。

.
.
,{
    xtype: 'fileuploadfield',
    buttonOnly: true,
    hideLabel: true,
    buttonText: "Importuoti excel failą",
    border: false,
    itemId: "uploadBtn",
    name: 'file'

},
.
.

这是我的 Controller 。每次我选择带有 fileuploadfield 的文件时，它都会激活函数 uploadFile()。

init: function() {
    var me = this;
    this.listen({
        '#uploadBtn': {
                'change': function(fld, value) {
                    console.log(value);
                    this.getTurtasPanel().setLoading(true, true);
                    if(value != ""){
                        me.uploadFile();
                        fld.reset();
                    }

                }
            },
})

上传文件函数。

uploadFile: function(){
    var fp = Ext.create('Ext.form.Panel', {
        fileUpload: true,
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 50,
        method: 'POST',
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'side'
        }
    })
    if(fp.getForm().isValid()){
        fp.getForm().submit({
            url: Turtas.Properties.getServicePath()+'/save/' + record.data.resource,
            headers: {'Content-Type':'multipart/form-data; charset=UTF-8'},
        })
    }

},

和 Spring Controller :

@RequestMapping(value="turtas/save/gelezinkeliai", method=RequestMethod.POST)
    public @ResponseBody void saveGelezinkeliaiFromExcel(@RequestParam("file") MultipartFile file){
    System.out.println(file);
}

我得到的错误:

Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

the request was rejected because no multipart boundary was found

我认为问题出在我的客户端请求中。我认为我的请求没有附加我要上传的文件。我尝试将客户端中的 header 设置为未定义，但随后内容类型变为“application/json”并且我收到请求不是多部分的错误。那么我的代码有什么问题呢？我真的希望有人能帮我解决这个问题。提前致谢!

更新

感谢@Lorenz Meyer 的回答，但现在我得到了不同的错误:

java.lang.IllegalArgumentException: Your InputStream was neither an OLE2 stream, nor an OOXML stream

我稍微修改了我的源代码。

 @RequestMapping(value="turtas/save/gelezinkeliai", method=RequestMethod.POST)
    public @ResponseBody void saveGelezinkeliaiFromExcel(@RequestParam("file") MultipartFile file){
    System.out.println(file.getContentType());
    System.out.println(file.getSize());
    System.out.println(file.getName());
    System.out.println(file.getOriginalFilename());
    System.out.println(file.isEmpty());
}

输出:

application/octet-stream
0
file

true

从客户端我不包含参数，从服务器端我请求一个参数(文件参数)，也许这就是问题所在。错误说我选择了错误的格式文件，尽管我选择了 .xlsx 或 .xls，但出现了同样的错误。

Answer 1

问题是您在上传功能中创建了一个新表单。您没有提交包含文件上传按钮的表单，而是提交了新的空表单。

首先您必须确保您的文件上传按钮位于表单内。然后你必须提交那个表格。

在更改处理程序中，在此行添加 fld :

me.uploadFile(fld);

将 URL 设置为表单的属性并将 uploadFile 简化为:

uploadFile: function(fld){
    var form = fld.up('form').getForm()
    if(form.isValid()) form.submit()
}

顺便说一句，记录(在 record.data.resource 中)未定义，您的代码似乎不完整或无法运行。