Никак не получаеться отправить картинку на сервер. Сначала в js обарачиваю картинку в FormData, а на сервере принимаю как MultiPartFile, но получаю с ajax ошибку 400(). Вот код.
Есть контроллер, который принимает данные о Item
и его картинку:
@Transactional
@RequestMapping(value="items/add", method = RequestMethod.POST)
public void add(
@RequestParam("name") String name,
@RequestParam("price") int price,
@RequestParam("descr") String descr,
@RequestParam("category") int categoryId,
@RequestParam("image") MultipartFile image
) throws IOException {
Item item = new Item();
byte[] item_image = image.getBytes();
item.setName(name);
item.setPrice(price);
item.setDescr(descr);
item.setImage(item_image);
Category category = categoryRepository.get(categoryId);
item.setCategory(category);
itemRepository.add(item);
}
Есть форма для выбора файла:
<form>
<div class="form-group">
<label for="item-add-title">Title:</label>
<input type="text" class="form-control" id="item-add-title">
</div>
<div class="form-group">
<label for="item-add-descr">Description:</label>
<input type="text" class="form-control" id="item-add-descr" style="height: 100px;">
</div>
<div class="form-group">
<label for="item-add-price">Price:</label>
<input type="number" class="form-control" id="item-add-price">
</div>
<div class="form-froup">
<label for="item-add-image">Image:</label>
<input type="file" class="form-control" id="item-add-image">
</div>
<div class="form-group">
<label for="item-add-category">Category:</label>
<select id="item-add-category" class="show-tick"></select>
</div>
</form>
Есть функция, которая обрабатывает отправление формы. Тут я оборачиваю картинку в FormData и отправляю ajax запросом ItemService.addItem(
):
//Modal Item Adding button onclick
$("#modal-items-success-btn").click(function () {
let name = $("#item-add-title").val();
let descr = $("#item-add-descr").val();
let price = $("#item-add-price").val();
let category_id = $("#item-add-category").val();
let image_bytes = $("#item-add-image").get(0).files[0];
let formData = new FormData();
formData.append("image", image_bytes);
console.log(image_bytes.toString());
ItemService.addItem(name, price, descr, category_id, formData, function () {
$("#modal-add-item").modal("toggle");
swal("Success!", "Item was successfully added", "success");
}, function () {
swal("Error!", "Something went wrong", "warning");
});
});
И сам Ajax запрос addItem:
static addItem(name, price, descr, category_id, image, callback_success, callback_error){
$.ajax({
url: "http://localhost:8090/api/admin/items/add",
type: "POST",
data: {
name: name,
price: price,
descr: descr,
category: category_id,
image: image},
processData: false,
success: callback_success,
error: callback_error
});
}
Уже при отправке запроса в консоли браузера получаю ошибку:
Failed to load resource: the server responded with a status of 400 ()
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть задача, где неизвестно конечное количество view элементов , в xml разметке id указываются в тексте, программно можно только int Id создавать,...
Как хранить коллекцию из нескольких значений, к примеру, String, Object? Есть для этого что-нибудь лучше ArrayList<HashMap<String, Object>>? Если будут 3 аргумента(String,...
Именно событие когда появляется эта дуга, как на прикрепленной фотографии