一、文件引入,具体修改对应的路劲
下载所需dropzone文件的路径:dropzone文件
<link rel="stylesheet" type="text/css" href="../static/css/dropzone.css" href="@{/static/css/dropzone.css}" />
<script src="../static/libs/jquery.min.js" src="@{/static/libs/jquery.min.js}" type="text/javascript"></script>
<script src="../static/plugins/dropzone/dropzone.js" src="@{/static/plugins/dropzone/dropzone.js}" type="text/javascript"></script>
二、html代码
<body>
<div class="form-group">
<div id="dropz" class="dropzone">
</div>
</div>
<input type="hidden" name="file" ng-model="file_id" id="file_id"/>
<div id="imgs" style="padding: 5px 10px 10px 5px;text-align: center;">
</div>
</body>
三、js代码
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropz", {
autoProcessQueue: true, //自动上传
url: "/upload",//文件提交地址
method:"post", //也可用put
paramName:"file", //默认为file
maxFiles:10,//一次性上传的文件数量上限
maxFilesize: 1024, //文件大小,单位:MB
acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
uploadMultiple: true,
addRemoveLinks:true,
parallelUploads: 1,//一次上传的文件数量
//previewsContainer:"#preview",//上传图片的预览窗口
dictDefaultMessage:'拖动文件至此或者点击上传',
dictMaxFilesExceeded: "您最多只能上传5个文件!",
dictResponseError: '文件上传失败!',
dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
dictFallbackMessage:"浏览器不受支持",
dictFileTooBig:"文件过大上传文件最大支持.",
dictRemoveLinks: "删除",
dictCancelUpload: "取消",
init:function(){
this.on("addedfile", function(file) {
//上传文件时触发的事件
document.querySelector('div .dz-success-mark').style.display = 'block';
});
this.on("success",function(file,data){
//上传成功触发的事件
console.log('ok');
// angular.element(appElement).scope().file_id = data.data.id;
document.querySelector('div .dz-success-mark').style.display = 'block';
});
this.on("error",function (file,data) {
//上传失败触发的事件
console.log('fail');
var message = '';
//lavarel框架有一个表单验证,
//对于ajax请求,JSON 响应会发送一个 422 HTTP 状态码,
//对应file.accepted的值是false,在这里捕捉表单验证的错误提示
if (file.accepted){
$.each(data,function (key,val) {
message = message + val[0] + ';';
})
//控制器层面的错误提示,file.accepted = true的时候;
alert(message);
}
});
this.on("removedfile",function(file){
//删除文件时触发的方法
// var file_id = angular.element(appElement).scope().file_id;
// if (file_id){
// $.post('/admin/del/'+ file_id,{'_method':'DELETE'},function (data) {
// console.log('删除结果:'+data.message);
// })
// }
// angular.element(appElement).scope().file_id = 0;
document.querySelector('div .dz-default').style.display = 'block';
});
}
});
注意:二里面的<div id="dropz" class="dropzone"> 的id值和三里面的new Dropzone("#dropz" 的值一致才可以初始化;
另里面有
maxFiles:10,//一次性上传的文件数量上限
parallelUploads: 1,//一次上传的文件数量
这两个属性,设置值的时候一定得注意,是有牵连的,也就是说可以解决多个文件上传到后台的问题;如果你选择了多个文件,但是调试的时候发现后台就只传了一个文件,那么就试试这个值的正确配置;上面的值是有效的,规律可以自己去慢慢研究;
四、后台java代码:
@ResponseBody
@PostMapping("/upload")
public R upload(@RequestPart(name = "file",required = false)MultipartFile file){
R r = uploadFile(file);
return R.ok(r);
}
public R uploadFile(MultipartFile file){
FileFeignApi fileUploadResource = Feign.builder()
.decoder(new JacksonDecoder())
.encoder(new FeignSpringFormEncoder()) //这里没有添加decoder了
.target(FileFeignApi.class,"http://127.0.0.1:8087");
return fileUploadResource.uploadSimple(file);
}
至于具体流的后台实现可以去搜一下;
这里主要是说前段的代码,好了,基本就可以运行了;