1.ajax异步请求上传文件

//商品大图
var formData = new FormData();
var book_logo_big = $("#booklogobig")[0].files[0];
formData.append('book_logo_big',book_logo_big);

$.ajax({
			url: "/StudentManageSystemAfter/student?action=queryStudentByPage&currentPage="+params.currentPage+"&pageSize="+params.pageSize,
			type: "POST",
			data: book_logo_big,
			dataType: "json",
			success: function (result){
					if(result.flag){
						alert(result.data)
					}else{
						alert(result.data)
					}
			},
			error: function (result){
				alert(XMLHttpRequest.status);
				alert(XMLHttpRequest.responseText);
				alert(XMLHttpRequest.readyState);  
			}
		 })

2.axios异步请求上传文件

addBookImage(){
                var url = "${pageContext.request.contextPath}/book/addBookImage";
                var formData = new FormData();
                //商品大图
                var book_logo_big = $("#booklogobig")[0].files[0];
                //商品缩略图
                var book_logos_small = $("#booklogosmall")[0].files[0];
                //商品子图
                var bookpic = $("[name='pic_name']");
                var bookpicArray = new Array(0);

                //大图
                formData.append('book_logo_big',book_logo_big);
                //缩略图
                formData.append('book_logos_small',book_logos_small);
                //小图
                $(bookpic).each(function (index,element){
                    formData.append('bookpicArray',element.files[0]);
                })
                axios.post(url,formData,{
                    headers:{
                        "Content-Type": "multipart/form-data"
                    }
                }
                ).then(
                    response=>{
                        if(response.data.flag){
                            alert(response.data.data)
                            this.addBook();
                        }else{
                            alert(response.data.data)
                        }
                    }
                )

            }

3.springmvc接收多个文件
 1.接收多个文件可以通过form表单设置一个多选框,并将类型设置为file,通过form提交的方式来传输(注意格式:multipartFile)
 2.如上通过axios绑定form的多选框,并以此添加至formData.注意,此时不需要再新建一个数组保存,级别名字相同,后端依旧可以通过@RequestParam获取到并以数组的形式接收
 3.确认上传文件为空的情况

@PostMapping(value = "/addBookImage", headers = "content-type=multipart/form-data")
    public void addBookLogoBig(HttpServletRequest request,
                               HttpServletResponse response,
                               @RequestParam(name="book_logo_big",required = false) MultipartFile book_logo_big,
                               @RequestParam(name="book_logos_small",required = false) MultipartFile book_logos_small,
                               @RequestParam(name="bookpicArray",required = false) MultipartFile[] bookpicArray)
            throws IOException {
            }
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐