Я пытаюсь загрузить несколько изображений, используя ng-file-upload с Spring Boot. Проблема в том, что angularjs отправляет файлы в неправильном порядке, без последовательности, в случайном порядке.
Выберите образы 0 1 2 3 4 5 и при отправке должны быть именно в таком порядке. Но
Angularjs отправляет файлы в порядке 5 2 1 0 4 3.
почему это произошло? Я хочу отправлять изображения одно за другим в порядке 0 1 2...35 36. Пример проблемы.
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" />
uploadimages.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.info("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);
}
Загружать по одному файлу за раз - это хорошая практика? Или не?
@jtate У меня есть проект Mangas, каждая глава должна начинаться с 0,1,2,3 в порядке возрастания. Я хотел упорядочить выбранные страницы для сохранения.


При последовательном выборе нескольких изображений для загрузки angularjs не отправляет изображение в порядке возрастания, серверная часть получает изображение в неорганизованном порядке, например 5 3 1 4 2 0, и сохраняет в базе данных. Я не хочу этого.
Мое решение - использовать запрос ORDER BY ASC для организации изображений, а затем при возврате api GET /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);
}
почему проблема в том, что нет порядка? Кроме того, как вы говорите, порядок должен быть? если вы используете
input type = "file"по умолчанию, то у него нет возможности узнать, какую фотографию пользователь выбрал первой, второй и т. д.