Загрузка картинки на сервер. Java REST API +Ajax

303
15 августа 2017, 13:40

Никак не получаеться отправить картинку на сервер. Сначала в 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 ()

READ ALSO
Как оформить XSSFWorkbook

Как оформить XSSFWorkbook

Всем привет! Сейчас делаю отчет, который выводится в excel

254
Динамическое создание id(String) для View элементов

Динамическое создание id(String) для View элементов

Есть задача, где неизвестно конечное количество view элементов , в xml разметке id указываются в тексте, программно можно только int Id создавать,...

162
Коллекция из нескольких String, String

Коллекция из нескольких String, String

Как хранить коллекцию из нескольких значений, к примеру, String, Object? Есть для этого что-нибудь лучше ArrayList<HashMap<String, Object>>? Если будут 3 аргумента(String,...

159
Как программно понять о конце списка айтемов в recycler view?

Как программно понять о конце списка айтемов в recycler view?

Именно событие когда появляется эта дуга, как на прикрепленной фотографии

278