上传照片 Spring - Ajax

Question

我正在尝试上传照片并使用 Spring 和 Ajax 预览上传的图像。

我有以下代码：

<h3>File Upload</h3>
    <ul>
        <li>
            <form id="upload-form" method="post" enctype="multipart/form-data">
                Select a file: <input type="file" name="uploadfile" size="45" accept="*" />
                <br>
                <input id="submit-button" type="submit" value="Upload" />
            </form>
        </li>
        <li><p>Result: <br><span id="result"></span></p></li>
    </ul>

    <h3>Show Image</h3>
    <ui>
        <li>original:<img id="image-o" src="#" alt="original image" /></li>
        <li>small: <img id="image-s" src="#" alt="small image" /></li>
        <li>medium: <img id="image-m" src="#" alt="medium image" /></li>
        <li>large: <img id="image-l" src="#" alt="large image" /></li>
        <li>extra large: <img id="image-xl" src="#" alt="extra large image" /></li>
    </ui>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#submit-button").on("click", function (event) {
                event.preventDefault();

                // create an FormData object
                var data = new FormData($('#upload-form')[0]);

                // disabled the submit button
                $("#submit-button").prop("disabled", true);

                // post data
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: "image/api/upload",
                    data: data,
                    processData: false,
                    contentType: false,
                    cache: false,
                    timeout: 600000,

                    success: function (data) {
                        // shows server's response
                      //  $("#result").text(data);
                        console.log("SUCCESS: ", data);

                        enableSubmitButton();
                        updateImages(data);
                    },

                    error: function (e) {
                        // shows server's response
                      //  $("#result").text(e.responseText);
                        console.log("ERROR: ", e);

                        enableSubmitButton();
                        updateImages(e.responseText);
                    }
                });
            });
        });

        function enableSubmitButton() {
            $("#submit-button").prop("disabled", false);
        }

        function updateImages(data) {
            var url = 'http://localhost:9001/image/api/' + data;
            $('#image-s').attr('src',url + '?size=s');
            $('#image-m').attr('src',url + '?size=m');
            $('#image-l').attr('src',url + '?size=l');
            $('#image-xl').attr('src',url + '?size=xl');
            $('#image-o').attr('src',url + '?size=o');
        }
    </script>

还有我的 Java 代码：

@POST
@Path("/upload")
@Consumes(ExtendedMediaType.MULTIPART_FORM_DATA)
@Produces(ExtendedMediaType.APPLICATION_JSON_UTF8)
@Transactional
public ResponseEntity<Void> uploadImage(@RequestParam("uploadfile") MultipartFile file) {

if (file.getSize() < maxFileSize && validExtensions.contains(file.getContentType())) {

        Image image = Image.builder().id(file.getSize()).build();
        imageServiceConfigMapper.saveImage(image);

       /* FormDataContentDisposition fileDetail = null;
        ImageMetadata imageMetadata = buildImageMetadata(fileDetail, image);
        imageServiceConfigMapper.saveMetadata(imageMetadata);*/
    }
        return new ResponseEntity<>(HttpStatus.OK);

当我从我的 PC 中选择一张照片时，它被接受了 - 请参见下面的屏幕截图：

当我点击上传时，我的浏览器给出了以下答案：

JSON 看起来像这样：

但所选图片未显示:

我是不是用错了URL？我得到上面屏幕结尾的站点地址是末尾带有 index.html 的站点，但我将 /api/upload 定义为相对路径... 如果我打开相对路径，我得到以下信息：

还是负责预览的代码有问题？

抱歉，我知道有很多类似的问题，但我找不到任何问题。我是一个初学者...... 很抱歉这么长 post 并感谢您的提前帮助！

Answer 1

Spring Content can do this and has a getting started guide and git repo with an angularjs based front-end that demonstrates exactly what you are trying to do. The getting started guide is here.

上传照片 Spring - Ajax

Uploading photo Spring - Ajax

ajax

spring-mvc

image-uploading

spring-boot