本次目标
本次实现的目标:实现图片上传微服务。
文件上传在很多项目和很多模块都要用到,所以将其单独作为一个微服务。
如下图蓝色箭头所示:FileUploadMicroservice
静态资源
本案例图片上传使用的是bootstrap-fileinput,文档地址:http://www.bootstrap-fileinput.com/
bootstrap-fileinput 简介
bootstrap-fileinput是一款非常优秀的HTML5文件上传插件,支持bootstrap 3.x 和4.x版本,具有非常多的特性:多文件选择。这个插件能最简单的帮你完成文件上传功能,且使用bootstrap样式。还支持多种文件的预览,images, text, html, video, audio, flash。另外还支持ajax方式上传文件,可以看到上传进度。支持拖拽的方式添加和删除文件。
文件上传地址:注意下方uploadUrl的值:
<script>
$("#file-1").fileinput({
uploadUrl: 'http://localhost/file/doFileUp',
allowedFileExtensions : ['jpg', 'png','gif'],
overwriteInitial: false,
maxFileSize: 7000,
maxFilesNum: 10,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
}).on("filebatchselected", function (event, data) {
//选择即上传
if (data.length == 0) {
return;
}
}).on