Upload de arquivo com dados do formulário

Fala Tiago, tudo bem ?

Imagino que o problema aí é que a requisição não será feita com o enctype multipart/form-data.

Não sei ao certo como a api do jQuery dá suporte aos requests do tipo multipart. Mas é possível (e bem simples) fazer com a própria fetch API do JavaScript.

Veja um exemplo:

function send() {
        const input = document.querySelector('#productPhoto');
        const uploadedFile = input.files[0];

        const data = new FormData();
        data.append('nome', document.querySelector('#productName').value)
        data.append('foto', uploadedFile)

        const requestDetails = {
            method: 'POST',
            body: data
        }

        fetch('http://localhost:8080/upload', requestDetails)
            .then(response => {

                if(!response.ok) 
                    throw new Error('Não foi possível enviar arquivo ao servidor');

                return response.text();
            })
            .then(text => {
                const p = document.createElement('p');
                p.textContent = text;

                document.querySelector('body').appendChild(p); 
            })
            .catch(error => alert(error.message));

    }

Imagine que pra esse caso temos um simples HTML, contendo dados de um produto. Um nome e uma foto:

<h1>Novo Produto</h1>

    <div>
        <label for="productName">Nome: </label><br />
        <input type="text" id="productName"/>
    </div>

    <div>
        <label for="productPhoto">Foto:</label><br />
        <input type='file' id="productPhoto" />
    </div>

    <button onclick="send()">Enviar</button>

Podemos trabalhar com o objeto de FormData que já abstrai a complexidade de fazer uma requisição com o enctype correto. Chamamos append() para cada dado que queiramos enviar, incluindo a representação do arquivo capturada do input file. Não sei ao certo como você está esperando esses dados no servidor, dado que estava mandando um JSON, mas esperar por representações da Produto produto e MultipartFile foto no seu controller já será suficiente pro Spring montar suas informações.

PS: Usei assim recentemente em um projeto e funcionou bonitinho

Espero ter ajudado. Abraço!

É Vraptor, mas é só adaptar o controller pra spring

    <div id="modalLancamento" class="modal fade">
        <div class="modal-dialog">
            <form method="post" id="lancamento-form" enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Adicionar Lançamento</h4>
                    </div>
                    <div class="modal-body">
                        <label>Título</label> <input type="text" id="titulo"
                            name="lancamento.titulo" class="form-control" />
                            <label for="autor" class="control-label">Autor:</label> <select
                                name="lancamento.autor.congressistaId" class="form-control" id="select-autores">
                            </select>
                            <label>Sinopse</label> <input type="text" id="sinopse"
                            name="lancamento.sinopse" class="form-control" />
                            <label>Saiba mais em:</label> <input type="text" id="observacao"
                            name="lancamento.observacao" class="form-control" />
                             <label>Selecione
                            a Capa</label> <input type="file" id="fie" name="file"><br/> <span
                            id="uploaded_image"></span>
                    </div>
                    <div class="modal-footer">

                    <input  type="hidden" name="lancamento.lancamentoId" id="lancamento-id">
                    <input  type="hidden" name="lancamento.capa" id="lancamento-capa">
                        <input type="submit" id="action" name="action"
                            class="btn btn-success" value="Adicionar">
                    </div>
                </div>
            </form>
        </div>
    </div>

$(document).on("submit","#lancamento-form",function(event){
                event.preventDefault();

               $.ajax(
                       {
                           "url":'<c:url value="/lancamentos/salvar" />',
                           "method":"post",
                           "dataType":'json',
                           "data": new FormData(this),
                           "contentType":false,
                           "processData":false
                           }
                       ).done(function(data){
                           $("#lancamento-form :input").val('');
                           $("#modalLancamento").modal("hide");
                           table.ajax.reload();
                           }).fail(function(jqXHR, status, errorThrown ){

                               var obj = jQuery.parseJSON(jqXHR.responseText);
                               var erros = [];    
                                erros = obj.errors;
                                 var errorsHtml= '';
                                 $.each( erros, function( key, value ) {
                                     errorsHtml += '<li>' + erros[key].message + '</li>'; 
                                 });
                                 swal('Oops!', errorsHtml, 'error');



                               });

                });

@Controller
@RequestScoped
public class LancamentoController {

    @Inject
    private LancamentoRepository lancamentoRepository;

    @Inject
    private Result result;
    @Inject
    private HttpServletRequest request;
    @Inject
    private Validator validator;


    @Post("/lancamentos/salvar")         
    public void salvar(@Valid Lancamento lancamento,UploadedFile file){


        validator.onErrorSendBadRequest();


        if(file != null){

            String novoNome = Normalizer.normalize(file.getFileName(), Normalizer.Form.NFD);
            novoNome = novoNome.replaceAll("[^\\p{ASCII}]", "");
            novoNome = UUID.randomUUID()+ novoNome;    

            if(file != null){
            lancamento.setCapa(novoNome);
            }

            try(FileOutputStream fos = new FileOutputStream(new File(
                    local.toAbsolutePath().toString() + FileSystems.getDefault().getSeparator() 
                    + FileSystems.getDefault().getSeparator() +lancamento.getCapa()))){
                file.writeTo(fos);
                file.getFile().close();
            } catch (IOException e) {
                e.printStackTrace();
                throw new RuntimeException("Erro ao subir foto.");

            }
        }
        if(lancamento.getLancamentoId() != null){

            lancamentoRepository.atualizar(lancamento);
        }

Adaptei deste exemplo: http://www.webslesson.info/2017/01/php-pdo-ajax-crud-with-data-tables-and-bootstrap-modals.html