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

问题描述:

我正在尝试使用ExtJs和Spring上传文件(excel),没有运气,所以希望你能帮助我。在面板中,我有一个按钮(fileuploadfield),并且我选择一个我想要上传的文件。

I'm trying to upload file (excel) using ExtJs and Spring without luck, so I hope you will help me. In panel I have a button (fileuploadfield) and with that I select a file, which I want to upload.

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

},
.
.

这是我的控制器。每次我使用fileuploadfield选择文件,它会激活函数uploadFile()。

This is my controller. Every time I choose file with fileuploadfield it activates function 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函数。

uploadFile function.

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控制器:

And 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

我认为问题是在我的客户端请求。我认为我的请求没有附加我要上传的文件。我试图将客户端的Headers设置为未定义,但是内容类型变为application / json,并且我收到请求不是multipart的错误。那么我的代码怎么了?我真的希望有人能帮我解决这个问题。感谢提前!

I think the problem is in my client side request. I think my request doesn't attach the file I want to upload. I tried to set Headers in client side as undefined, but then content type becomes "application/json" and i get error that the request isn't multipart. So what's wrong with my code? I really hope someone will help me to figure out of this problem. Thanks in advance !

更新

感谢@Lorenz Meyer的答案,现在我得到不同的错误:

Thanks @Lorenz Meyer for the answer but now i get different error:


java.lang.IllegalArgumentException:您的InputStream既不是
OLE2流,也不是OOXML流

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,同样的错误发生。

From client side i don't include parameters and from server side i request one parameter (file param), maybe that's the problem. Error says i choose bad format files, although i choose .xlsx or .xls, and the same error occurs.

是在您的上传功能中创建一个新表单。您提交新的空表单而不是提交包含文件上传按钮的表单。

The problem is that you create a new form in your upload function. Instead of submitting the form that contains your file upload button, you submit the new empty form.

首先,您必须确保您的文件上传按钮位于表单中。那么你必须提交表单。

First you have to make sure, your file upload button is inside a form. Then you have to submit that form.

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

In the change handler add fld on this line :

me.uploadFile(fld);

将URL设置为窗体的属性,并将uploadFile简化为:

Set the URL as a property of the form and simplify uploadFile to:

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

Btw,记录.data.resource)没有被定义,似乎你的代码不完整或者不起作用。

Btw, record (in record.data.resource) is not defined and it seems your code is not complete or it would not work.