Question

我知道我可以在互联网上找到这个问题的十亿个变种但不幸的是我真的无法想象如何解决这个问题。

我只想制作一个Spring应用程序，我可以上传并预览从我的电脑中选择的照片并将其保存在数据库中。

我经常收到“不支持的媒体类型”错误...

我已经阅读了整个互联网，但我真的没有线索......

这是我的代码：

@POST
@Path("/upload")
@Consumes(ExtendedMediaType.MULTIPART_FORM_DATA)
@Produces(ExtendedMediaType.APPLICATION_JSON)
@ApiOperation(
        value = "Upload a selected image",
        notes = "Return with the ID of the uploaded image.",
        response = ByteArrayInputStream.class)
@ApiResponses(value = {
        @ApiResponse(code = NotAcceptedMediaTypeError.HTTP_RESPONSE_CODE, message = NotAcceptedMediaTypeError.SWAGGER_API_RESPONSE_MESSAGE, response = ErrorInfo.class)})
@Transactional
@Override
public Response uploadImage(@RequestParam("file") final MultipartFile file) throws NotAcceptedMediaTypeError, IOException, ParseException {

    InputStream inputStream = file.getInputStream();

    List<String> acceptedExtensions = new ArrayList<>();
    acceptedExtensions.add("jpg");
    acceptedExtensions.add("png");

    try (LimitedSizeInputStream limitedSizeInputStream = new LimitedSizeInputStream(inputStream, Long.parseLong(env.getProperty("spring.servlet.multipart.max-file-size")))) {
        byte[] content = IOUtils.toByteArray(limitedSizeInputStream);

        // check the type of the uploaded file
        org.apache.tika.mime.MediaType uploadedMediaType = ContentTypeDetector.getMediaType(content);
        boolean validMediaType = acceptedExtensions.contains(uploadedMediaType.toString());

        if (validMediaType) {
            Image image = Image.builder().content(content).build();
            imageMapper.saveImage(image);

            FormDataContentDisposition fileDetail = new FormDataContentDisposition(CustomHttpHeader.PROCESS_ID);

            ImageMetadata imageMetadata = buildImageMetadata(fileDetail, image);
            imageMapper.saveMetadata(imageMetadata);

            return Response.ok().entity(imageMetadata.getUuid()).build();
        } else {
            throw new NotAcceptedMediaTypeError(uploadedMediaType.toString(), acceptedExtensions);
        }
    }
}

我的.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Service</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
</head>
<body>
    <h1>RDBMS Image REST Service</h1>
    <h3>File upload demo</h3>
    <ul>
        <li>
            <form id="upload-file-form" method="post" enctype="multipart/form-data" action="api/upload">
                Upload your file: <input type="file" name="file" size="45" accept="image/png,image/jpeg,image/gif"/>
                <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').click(function (event) {
                //stop submit the form, we will post it manually
                event.preventDefault();

                // get form
                var form = $('#upload-form')[0];

                // create an FormData object
                var data = new FormData(form);

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

                // post data
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: "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);
                    }
                });
                headers: {
                    contentType: 'application/json'
                    }
            });
        });

        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>
</body>

是内容类型标题还是相对网址错误？

有什么建议吗？我真的很高兴！

不支持的媒体类型415 - 上传照片

0 个答案: