Загрузка загрузочного файла Spring Bad Request 400
Здравствуйте, я пишу веб-приложение с использованием Spring Boot и AngularJs и нуждаюсь в простой загрузке файла, которая не работает в данный момент.
Я уже читал, что весенняя загрузка должна автоматически настраивать многоэтапную загрузку при наличии зависимости mvc. От: https://spring.io/guides/gs/uploading-files/
В рамках автоматической настройки Spring MVC Spring Boot создаст компонент MultipartConfigElement и подготовится к загрузке файлов.
Функция Javascript, которая отправляет запрос:
var postFormData = function (file, url, successCallback, errorCallback, progressCallback) {
var xhr = new XMLHttpRequest(),
formData = new FormData();
formData.append("file", file);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
successCallback(xhr.status); //File is Uploaded
} else {
errorCallback(xhr.status);
}
}
};
function progress(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
progressCallback(percentComplete);
} else {
progressCallback(evt.loaded);
}
}
xhr.open("POST", url, true);
//xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.addEventListener("progress", progress, false);
xhr.send(formData);
}
Многокомпонентная конфигурация Бина в моем основном классе приложения:
@Bean
MultipartConfigElement multipartConfigElement() {
MultipartConfigFactory factory = new MultipartConfigFactory();
factory.setMaxFileSize(MAXIMUM_FILE_SIZE);
factory.setMaxRequestSize(MAXIMUM_FILE_SIZE);
return factory.createMultipartConfig();
}
Контроллер загрузки:
@Controller
@RequestMapping("/api")
public class FileUploadController {
@Autowired
UserRepository userRepository;
@Autowired
VolumeMetaRepository volumeMetaRepository;
/**
* Handles File upload of volumedata
*
* @param file Must not be null
**/
@RequestMapping(value = "/volumedata/meta/test", consumes= "multipart/form-data", method=RequestMethod.POST)
@ResponseBody
public void handleFileUpload(
@RequestParam("file") MultipartFile file) {
if (!file.isEmpty()) {
/* try {
InputStream fileStream = file.getInputStream();
OutputStream out = new FileOutputStream(file.getOriginalFilename());
IOUtils.copy(fileStream, out);
} catch (IOException e) {
throw new IllegalStateException("Error uploading file.", e);
}*/
/* String filePath = request.getServletContext().getRealPath("/");
try {
file.transferTo(new File(filePath+ "/" + file.getOriginalFilename()));
} catch (IOException e) {
e.printStackTrace();
}*/
}
}
И поскольку существуют другие потоки Stackru, в которых новая загрузочная версия Spring решила проблему с использованием '1.2.2.BUILD-SNAPSHOT', мои зависимости gradle:
version = '1.2.2.BUILD-SNAPSHOT'
dependencies {
compile group: 'org.springframework.boot', name: 'spring-boot-starter-web', version:version
compile group: 'org.springframework.boot', name: 'spring-boot-starter-aop', version:version
compile group: 'org.springframework.boot', name: 'spring-boot-starter-data-jpa', version:version
compile group: 'org.springframework.hateoas', name: 'spring-hateoas', version:'0.16.0.RELEASE'
compile group: 'org.springframework.data', name: 'spring-data-rest-webmvc', version:'2.1.4.RELEASE'
compile group: 'org.springframework.boot', name: 'spring-boot-starter-security', version:version
compile group: 'org.springframework.boot', name: 'spring-boot-starter-data-rest', version:version
compile group: 'commons-io', name: 'commons-io', version:'2.1'
compile group: 'com.fasterxml.jackson.datatype', name: 'jackson-datatype-jsr310', version:'2.3.4'
compile group: 'org.springframework.boot', name: 'spring-boot-starter-integration', version:version
compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version:version
compile group: 'org.springframework.session', name: 'spring-session', version:'1.0.0.BUILD-SNAPSHOT'
compile group: 'org.springframework.data', name: 'spring-data-redis', version:'1.4.1.RELEASE'
compile group: 'redis.clients', name: 'jedis', version:'2.4.2'
compile group: 'org.springframework.boot', name: 'spring-boot-starter-remote-shell', version:version
compile group:'com.google.guava', name:'guava', version:'18.0'
compile files ('lib/vendor/niftijio.jar');
compile("com.h2database:h2")
testCompile(group: 'org.springframework.boot', name: 'spring-boot-starter-test', version:'1.1.6.RELEASE') {
exclude(module: 'commons-logging')
}
testCompile group: 'com.jayway.jsonpath', name: 'json-path', version:'0.9.1'
testCompile 'org.springframework:spring-test:3.2.3.RELEASE'
testCompile 'junit:junit:4.+'
testCompile "org.mockito:mockito-all:1.9.5"
}
Брошенная ошибка:
{
"timestamp" : "2015-01-19T10:22:53.710Z",
"status" : 400,
"error" : "Bad Request",
"exception" : "org.springframework.web.bind.MissingServletRequestParameterException",
"message" : "Required MultipartFile parameter 'file' is not present",
"path" : "/api/volumedata/meta/test"
}
Он говорит мне, что параметр "file" отсутствует, но моя полезная нагрузка Request показывает, что параметр есть.
Request Payload:
------WebKitFormBoundary40qPAhpvA20pd8V1
Content-Disposition: form-data; name="file"
C:\fakepath\test.gz
------WebKitFormBoundary40qPAhpvA20pd8V1--
Есть ли у кого-нибудь идея, что отсутствует в моей конфигурации, или что может вызвать ошибку?
заранее спасибо
1 ответ
Я нашел причину ошибки. Он возник не из моего контроллера Spring, а из моего HTML-кода angularJS.
Это было мое поле ввода для загрузки:
<div class="form-group"
ng-class="{ 'has-error': volume_upload_form.file_field.$invalid && volume_upload_form.file_field.$dirty}">
<label name=file-field-label>Volume Dataset</label>
<input value=file
name=file
ng-model=upload.file
required
id=file
file_ext_validation
type="file"
extensions="nii,NII,gz,jpeg,JPG"/>
<div class="error"
ng-show="volume_upload_form.volume.$invalid">
<small class="error"
ng-show="volume_upload_form.volume.$error.fileExtValidation">
File must be of type ".nii"
</small>
</div>
</div>
Как вы можете видеть, это использование ng-модели по умолчанию, также связывайтесь с моим угловым контроллером ("upload" - мой псевдоним контроллера).
ng-model=upload.file
Но Angular не поддерживает поле ввода файла html по умолчанию. Таким образом, в upload.file была сохранена только строка, содержащая путь к файлу, а не фактический объект File. Я должен был написать пользовательскую директиву:
var fileModel = function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}
module.exports = fileModel;
Который возвращает фактический объект File. Мой новый HTML-код загрузки был следующим:
<div class="form-group"
ng-class="{ 'has-error': volume_upload_form.file_field.$invalid && volume_upload_form.file_field.$dirty}">
<label name=file-field-label>Volume Dataset</label>
<input name=file
file-model="upload.fileModel"
ng-model="file"
required
file_ext_validation
type="file"
extensions="nii,NII,gz,jpeg,JPG"/>
<div class="error"
ng-show="volume_upload_form.volume.$invalid">
<small class="error"
ng-show="volume_upload_form.volume.$error.fileExtValidation">
File must be of type ".nii"
</small>
</div>
</div>
ты можешь видеть
file-model="upload.fileModel"
связывает объект File из поля ввода файла с угловым контроллером. Вот правильный запрос полезной нагрузки.
------WebKitFormBoundaryR1AXAwLepSUKJB3i
Content-Disposition: form-data; name="file"; filename="test.nii.gz"
Content-Type: application/x-gzip
------WebKitFormBoundaryR1AXAwLepSUKJB3i--
Я столкнулся с этой проблемой, потому что неправильно назвал var.
В контроллере получения файла
RequestParam("file") ожидает параметр с именем "файл".
Но я назвал это как-то вроде "связка". Так что это плохая просьба.