Upload files using AngularJS
- The front desk is an Angular page
- Use SpringBoot/SpirngMVC in the background
Upload file
html
<div> <input type="file" /> <button ng-click="uploadFile()">Upload</button> </div>
js
$ = function(){
var form = new FormData();
var file = ("fileUpload").files[0];
('file', file);
$http({
method: 'POST',
url: '/upload',
data: form,
headers: {'Content-Type': undefined},
transformRequest:
}).success(function (data) {
('upload success');
}).error(function (data) {
('upload fail');
})
}
Notice:
- The default 'Content-Type' of AngularJS is application/json. By setting 'Content-Type': undefined, the browser not only helps us set Content-Type to multipart/form-data, but also fills the current boundary.
- If set manually to: 'Content-Type': multipart/form-data, the background will throw an exception: the request was rejected because no multipart boundary was found
- boundary is a randomly generated string that separates the beginning and end of text.
- By setting transformRequest: , anjularjs transformRequest function will serialize our formdata object, or you can not add it
Backstage
@RequestMapping("/upload")
public void uploadFile(@RequestParam(value = "file" , required = true) MultipartFile file) {
//deal with file
}
Notice
The file must be obtained through the @RequestParam annotation, and the value must be specified to obtain it.
This completes the upload of the file
Pass other parameters while uploading files
html
<div>
<input type="file" />
<button ng-click="ok()">Upload</button><br>
<input ng-model="" />
<input ng-model="" />
</div>
js
$ = function () {
var form = new FormData();
var file = ("fileUpload").files[0];
var user =($);
('file', file);
('user',user);
$http({
method: 'POST',
url: '/addUser',
data: form,
headers: {'Content-Type': undefined},
transformRequest:
}).success(function (data) {
('operation success');
}).error(function (data) {
('operation fail');
})
};
Notice
Object needs to be converted to String and attached to form, otherwise it will be converted to string [Object, object]
Backstage
@RequestMapping("/upload")
public Map<String, Object> upload(@RequestParam(value = "file") MultipartFile file, @RequestParam(value = "user", required = true) String user) {
try (FileInputStream in = (FileInputStream) ();
FileOutputStream out = new FileOutputStream("filePathAndName")) {
//Parse the Json object to the UserModel object ObjectMapper objectMapper = new ObjectMapper();
UserModel userModel = (user, );
//Save the file to filePathAndName int hasRead = 0;
byte[] bytes = new byte[1024];
while ((hasRead = (bytes)) > 0) {
(bytes, 0, hasRead);
}
} catch (IOException e) {
();
}
}
Notice
ObjectMapper is
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.