extjs4.2 - extjs 4.2 中的文件上传无需 form.submit()

Question

我正在尝试在 extjs 中上传文件(截至目前任何扩展名)。我有一个模型和商店。文件上传是从窗口中进行的，而窗口中没有表单。我在网上尝试过的所有示例都是使用 form.submit() 的。我改为使用 Ajax 调用(如下所示)将数据发送到服务器。

Ext.Ajax.request({

            url : 'qaf/saveSetupDetails.action',

            params : {
                'data' : recordsToSend
            },
            failure : function(response){
                //console.log('error connecting controller');
            },
            success : function(response){
                //console.log('successfully submitted');
            }
        });

数据中发送的记录如下。

var store = Ext.getStore('SomeStore');
        var modifiedRecords = store.getModifiedRecords();
        var recordsToSend = [];
        if(modifiedRecords.length > 0){
            Ext.each(modifiedRecords, function(record){
                recordsToSend.push(record.data);//I'm sure that this is so dump but this is how I do it for other records which are string and not sure how to do it for a file...
            });
        }
        Ext.USE_NATIVE_JSON = true;
        recordsToSend = Ext.encode(recordsToSend);

在模型中设置记录时，我使用以下代码..

var rec = Ext.create('QAF.model.MyModel');
rec.set('modelField',Ext.getCmp('fileUploadCompID').value);

我收到了 500 状态错误，响应为“无法将类型 [java.lang.String] 的值转换为所需类型 [org.springframework.web.multipart.commons.CommonsMultipartFile]”

我确定这是因为我将值设置为模型的方式，因为 Ext.getCmp('fileUploadCompID').value 给出了文件名。请让我知道如何将文件设置到模型以及我必须为模型中的字段指定什么数据类型。

下面是我尝试在 spring Controller 中检索文件的方法。

@RequestMapping (value = "/qaf/saveSetupDetails.action")
    public @ResponseBody
    void saveSetupDetails(@RequestParam CommonsMultipartFile data)throws Exception{
        log.info("Enter into saveSetupDetails method..." + data.getOriginalFilename());
    }

请让我知道我做错了什么以及需要采取哪些措施来解决此问题...

Answer 1

如果您想仍然使用 ExtJS 的 fileuploadfield 并使用 HTML5 FileReader 通过 AJAX 调用上传，您可以这样做:

launchUpload: function () {
    //get a handle of the "file" input in the widget itself...
    var fileInput = document.getElementById(yourUploadField.button.fileInputEl.id);
    var fileReader = New FileReader();
    var fileToUpload = fileInput.files[0]; //assuming your only uploading one file...
    var me = this

    fileReader.onload = function (e) {
         me.onLoadFile(e, me, fileToUpload.name);
    }

    fileReader.readAsDataURL(fileToUpload);

}, 
onLoadFile: function (e, scope, filename) {

     //I carry the scope around for functionality...

     Ext.Ajax.request({
        method: 'POST',
        url: 'url',
        scope: scope,
        jsonData: { fileNameParameter: filename, fileDatainBase64: e.target.result},
        success: function (response, operation) {
            //success..
        },
        failure: function (response, operation) {
            //failure...
        }
    });       

}