使用 Spring Boot 上传多个文件答案

【问题标题】：Multiple files upload with Spring Boot使用 Spring Boot 上传多个文件
【发布时间】：2018-10-10 23:34:49
【问题描述】：

我正在尝试使用 ng-file-upload 和 Spring Boot 上传多个图像。问题是angularjs以错误的顺序发送文件，没有顺序，打乱了。

选择图像0 1 2 3 4 5，发送时需要按该顺序。但 Angularjs 按顺序发送文件5 2 1 0 4 3.

为什么会这样？我想按0 1 2...35 36 的顺序一张一张地发送图像。 Example of the problem.

Index.html

<!-- Input Save images-->
<input class="btn btn-primary" multiple type="button" 
upload-file="vm.fotos" ngf-select="vm.uploadPaginas($files,$invalidFiles)"
    id="file" accept="image/*" ngf-max-size="2MB" value="Selecionar fotos" />

上传图片.js

function uploadPaginas(paginas, paginaErro) {
    vm.paginas = paginas;
    vm.paginaErro = paginaErro;
    if (paginas.length && vm.formPagina.$valid) {
        angular.forEach(paginas, function (pagina, count) {
            Upload.upload({
                url: '/api/pagina',
                method: 'POST',
                arrayKey: '',
                data: { paginas: pagina, nome: vm.pagina.descricao, capitulo: vm.pagina.capitulo, numCapitulo: count }
            }).then(function (data) {
                    console.log("File: "+pagina.name+"\n Count: "+count);
                })
        })
    } else {
        vm.mensagemPagina = "Não foi salvo";
    }
}

imagesController.java

/**
 * Save images
 * 
 * @param paginas
 * @param nome
 * @param Capitulo
 * @param numCapitulo
 * @return
 * @throws IOException
 */
@RequestMapping(value = "/pagina", method = RequestMethod.POST, consumes = { "multipart/form-data" })
public @ResponseBody ResponseEntity<PaginasEntity> cadastrarPaginas(
        @RequestParam(value = "paginas",required = false) MultipartFile paginas, @RequestParam(value = "nome",required = false) String nome,
        @RequestParam(value = "capitulo",required = false) Long Capitulo,
        @RequestParam(value = "numCapitulo", required = false) int numCapitulo) throws IOException {

    if (!paginas.isEmpty()) {
        numCapitulo++;

        System.out.println("capitulo:"+numCapitulo);
        CapitulosEntity capitulo = new CapitulosEntity();
        capitulo.setId(Capitulo);           

        System.out.println("nome:"+paginas.getOriginalFilename());
        PaginasEntity pagina = new PaginasEntity();
        pagina.setFotos(paginas.getBytes());
        pagina.setNome(nome);
        pagina.setCapitulo(capitulo);
        pagina.setNumeroPagina(numCapitulo);
        paginaService.cadastrar(pagina);
    } else {
        throw new RuntimeException("Erro ao salvar Pagina");
    }

    return new ResponseEntity<>(HttpStatus.CREATED);
}

一次上传一个文件是一种好习惯吗？还是不行？

【问题讨论】：

为什么没有订单是个问题？另外，你说的顺序应该是什么？如果您使用默认的input type="file"，那么它无法知道用户首先选择了哪张照片，第二张等等。
@jtate 我有个Mangas的项目，每章需要从0,1,2,3升序开始。我想组织要保存的所选页面的顺序。

标签： angularjs spring-boot ng-file-upload

【解决方案1】：

当依次选择多张图片上传时，angularjs不按升序发送图片，后端按5 3 1 4 2 0等乱序接收图片并存入数据库。我不想要这个。

我的解决方案是使用查询ORDER BY ASC来组织图像，然后当返回apiGET /pagina/{id}时，所有图像将按升序排列。

PaginasRepository.java

@Repository
public interface PaginasRepository extends CrudRepository<PaginasEntity, Long> {

    @Query("SELECT p FROM PaginasEntity as p WHERE p.capitulo =:id ORDER BY numeroPagina ASC")
    public Page<PaginasEntity> buscarPaginaPorCapituloId(@Param("id") CapitulosEntity id, Pageable pageable);
}

【讨论】：