使用 extjs 4 spring 上传图像文件

Question

论坛成员我在 extjs 4 和 JAVA 中上传文件时遇到了一些问题。

我用的是extjs4，上传表单代码是

{
                                    xtype: 'filefield',
                                    margin: '10 0 0 5',
                                    width: 296,
                                    fieldLabel: 'Image',
                                    emptyText: 'Select Company logo...',
                                    id: 'cmplogo',
                                    itemId: 'cmplogo',
                                    name: 'cmplogo',
                                    labelWidth: 70
                                },
                                {
                                    xtype: 'button',
                                    margin: '10 0 0 90',
                                    width: 89,
                                    text: 'Upload Image',
                                    action: 'btn-upload-img'
                                },

按钮上传图片有action:'btn-upload-img'，函数定义如下

fileUpload: function(btn) {
        var win = btn.up('window');
        var form = win.down('form').getForm();
        alert('VALUE IS :'+form.getValues());

        if(form.isValid()){
            form.submit({
                url : 'company/UploadFile.action',
                waitMsg: 'Uploading your file...',
                success: function(fp, o) {
                    Ext.Msg.alert('Success', 'Your file has been uploaded.');
                }
            });
        }
    },

我的java控制器有以下功能代码

@RequestMapping(value = "/company/UploadFile.action")
    public @ResponseBody
    Map<String, ? extends Object> uploadFile(UploadItem uploadItem, BindingResult result) throws Exception {
        System.out.println("QUERY TO UPLOAD FILE");
        try {
            if(result.hasErrors()) {
                for(ObjectError error: result.getAllErrors()) {
                    System.err.println("Error: "+error.getCode()+" - "+error.getDefaultMessage());
                }
            }
            else
            {
                MultipartFile file = uploadItem.getFileData();
                String fileName = null;
                InputStream inputStream = null;
                OutputStream outputStream = null;
                if(file.getSize() > 0) {
                    inputStream = file.getInputStream();
                    if(file.getSize() > 10000) {
                        System.out.println("FILE SIZE:::"+file.getSize());
                    }
                    System.out.println("SIZE ::"+file.getSize());
                    fileName = "E:\\images\\"+file.getOriginalFilename();
                    outputStream = new FileOutputStream(fileName);
                    System.out.println("FILE NAME AND PATH IS ::"+fileName);
                    System.out.println("FILENNAME ::"+file.getOriginalFilename());

                    int readBytes = 0;
                    byte[] buffer = new byte[10000];
                    while((readBytes = inputStream.read(buffer, 0, 10000)) !=-1) {
                        outputStream.write(buffer, 0, readBytes);
                    }
                    outputStream.close();
                    inputStream.close();
                }
            }


        } catch (Exception e) {
            return getModelMapError("Error trying to read city");
        }
        return null;
    }

不知道我上面的代码有什么问题。 我的萤火虫控制台给了我以下错误

**uncaught exception: You're trying to decode an invalid JSON String: <pre>{"message":"Error trying to read city","success":false}</pre>**

请给我一些解决方案，我可以尝试尽快解决我的错误。

Answer 1

您的控制器发送 JSON 数据（应用程序/json）作为 extjs 不支持的响应。 尝试设置您的响应内容类型：“text/html”，它会正常工作。 将@ResponseBody 更改为 ResponseEntity

@RequestMapping(value = "/company/UploadFile.action")
public ResponseEntity<String> Map<String, ? extends Object> uploadFile(UploadItem uploadItem, BindingResult result) throws Exception {
    HttpHeaders responseHeaders = new HttpHeaders();
    responseHeaders.add("Content-Type", "text/html; charset=utf-8");

    // your controller logic goes here

    return new ResponseEntity<String>(response, responseHeaders, HttpStatus.OK);
}

Answer 2

如果您想使用 Spring 上传除 extjs 4 之外的文件，您可以使用带有 multipartData 的 RestTemplate 或 Apache HttpClient。 Spring 还提供了内置工具来上传文件。

有用的链接 -

http://blog.springsource.org/2009/03/27/rest-in-spring-3-resttemplate/

Answer 3

我遇到了类似的问题。

我将其范围缩小到 ExtJS 试图将响应解码为 JSON。但是响应是用<pre> 标签包裹的。但是，当我查看萤火虫时，我只会看到普通的 json 字符串。由于它是场景浏览器后面的常规multipart 表单帖子，因此以某种方式使用<pre> 标签包装了响应。

不确定如何修改此浏览器行为。

Answer 4

你也可以用"*/*"设置MappingJacksonHttpMessageConverter的supportedMediaTypes属性，就像这样：

<mvc:annotation-driven>
    <mvc:message-converters>
        <bean class="org.springframework.http.converter.StringHttpMessageConverter" />
        <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
            <property name="supportedMediaTypes" value="*/*" />
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>

Answer 5

您在 Java 端的某处抛出异常，该异常返回您在 Firebug 错误中看到的字符串。我建议在 catch 块中添加一个断点并调查异常是什么。这将使您更好地了解损坏的内容以及如何修复它。