Я знаю, что могу найти миллиард вариантов этого вопроса в Интернете, но, к сожалению, я действительно не могу понять, как решить его в моем случае.
Я просто хочу создать приложение Spring, куда я могу загрузитьи просмотрите фотографию, выбранную на моем ПК, и сохраните ее в базе данных.
Я постоянно получаю сообщение об ошибке "Unsupported Media Type" ...
Я уже прочитал через весь Интернет, но японятия не имею ...
Вот мой код:
@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>
Это что-то с заголовком типа содержимого или относительные URL неверны?
Какие-либо предложения?Я был бы очень рад!