Ajax图片上传到后端

使用Ajax实现前端传图片到后端

具体思路：使用document.getElementById('idname').files[0]获取元素；

再通过formData.apend("keyname",value)添加到formData中去；

最后通过Ajax将数据发送到后端，后端将request转为MultipartHttpServletRequest对象，然后对MultipartHttpServletRequest对象写到具体目录；

HTML

<div>
    <p> 选择文件:<input id="upload_file1" type="file" name="files">
    <p> 选择文件:<input id="upload_file2" type="file" name="files">
        <input type="button" value="提交" onclick="upload()">
</div>

JavaScript

function upload() {
       var formData = new FormData();
       formData.append("file1", document.getElementById('upload_file1').files[0]);
       formData.append("file2", document.getElementById('upload_file2').files[0]);
       $.ajax({
           url : 'http://localhost:8090/user/file',
           type : 'POST',
           data : formData, // 上传formdata封装的数据包
           dataType : 'JSON',
           cache : false, // 不缓存
           processData : false, // jQuery不要去处理发送的数据
           contentType : false, // jQuery不要去设置Content-Type请求头
           success : function(data) {
               alert("success");
           }
       });
   }

后端（这里的后端使用了两种方式写入文件）

 @PostMapping("/file")
    @CrossOrigin
    public String uploadFile(HttpServletRequest request, HttpServletRequest response, HttpSession session) throws IOException {
        log.info("进入file");
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile multipartFile = multipartRequest.getFile("file1");//file是form-data中二进制字段对应的name

       // multipartFile.transferTo(new File("D:\\userhead"+ UUID.randomUUID()+multipartFile.getOriginalFilename()));
        log.info("multipartFile.toString()--------");
        log.info(multipartFile.getOriginalFilename());
        log.info(multipartFile.toString());
        log.info("打印大小---");
        System.out.println(multipartFile.getSize());
        //拼接路径
        String address="D:\\userhead\\"+ UUID.randomUUID()+multipartFile.getOriginalFilename();
        log.info(address);
        //直接用transforto存储
        multipartFile.transferTo(new File(address));
//使用文件流写入
//        File filex=new File(address);
//        InputStream is=null;
//        FileOutputStream fos=null;
//        byte[] buffer=new byte[100*1024];
//        try{
//            //获取输入流
//            is=multipartFile.getInputStream();
//            //输出流
//            fos=new FileOutputStream(address);
//            int len=0;
//            log.info("开始读写");
//            while((len=is.read(buffer))>0){
//                fos.write(buffer,0,len);
//            }
//            fos.flush();
//            is.close();
//            fos.close();
//        }catch (IOException e) {
//            log.info("文件上传失败！");
//        }

        return " ";
    }

我踩的坑：Ajax的url一定要写对，我在idea里面按住CTRL键可以跳转到具体位置，但是我的端口号是错的，端口号一定要写自己项目配的端口号。