使用ajax跨域调用springboot框架的api传输文件

来源：互联网发布：英语软件哪个好编辑：程序博客网时间：2024/04/30 02:18

在新项目中使用的是springboot编写的api，涉及到ajax跨域请求和传输文件的问题，在这里记录一下
首先是前台页面的代码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>test_api</title>    <script type="text/javascript" src="jquery-1.7.2.js"></script>    <script type="text/javascript">      function test(){        var obj = new Object;        obj.name = $("#name").val();        obj.age = $("#age").val();        var file = document.getElementById("file").files[0];        var formData = new FormData();        formData.append("data",JSON.stringify(obj));        formData.append("file",file);        $.ajax({          type:"post",          url:"http://localhost:8187/test/upload",          contentType:false,          processData:false,          data:formData,          success:function(data){              alert(data.msg);          }        });      }    </script>  </head>  <body>    <div class="">      <table>        <tr>          <td>sCompany:</td>          <td><input type="text" id="name" value="tom" /></td>        </tr>        <tr>          <td>scardtype:</td>          <td><input type="text" id="age" value="23" /></td>        </tr>        <tr>          <td>file:</td>          <td><input type="file" id="file" /></td>        </tr>      </table>      <input type="button" onclick="test();" value="提交" />    </div>  </body></html>

程序入口类的代码

package test;import javax.servlet.MultipartConfigElement;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.boot.web.servlet.MultipartConfigFactory;import org.springframework.context.annotation.Bean;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;/** * Hello world! * */@SpringBootApplicationpublic class App {    public static void main( String[] args )    {        SpringApplication.run(App.class, args);    }    //设置ajax跨域请求    @Bean    public WebMvcConfigurer corsConfigurer(){        return new WebMvcConfigurerAdapter(){            @Override            public void addCorsMappings(CorsRegistry registry) {                registry.addMapping("/**").allowedOrigins("*");            }        };    }    @Bean    public MultipartConfigElement multipartConfigElement(){        MultipartConfigFactory factory = new MultipartConfigFactory();        //设置上传文件大小限制        factory.setMaxFileSize("10MB");        //设置上传总数据大小        factory.setMaxRequestSize("15MB");        return factory.createMultipartConfig();    }}

api代码

package test.controller;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileOutputStream;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;import test.model.UploadInfo;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;@RestController@RequestMapping("/test")public class TestController {    /**     * 上传文件     * @param req form请求     * @return json字符串     */    @RequestMapping(value="/upload", method=RequestMethod.POST)    public String uploadFile(HttpServletRequest req){         // 返回结果用 json对象        JSONObject returnObj = new JSONObject();        //从请求中获取请求的json字符串        String strData = req.getParameter("data");        //将获取到的JSON字符串转换为Imgidx对象        UploadInfo info = JSON.parseObject(strData, UploadInfo.class);        //获取上传的文件集合        List<MultipartFile> files = ((MultipartHttpServletRequest)req).getFiles("file");        MultipartFile file = files.get(0);        // 返回信息头部        Map<String, String> header = new HashMap<String, String>();        header.put("code", "0");        header.put("msg", "success");        File file1234 = new File(file.getOriginalFilename());        //插入数据的影响的数据条数        int result = 0;        //将文件上传到save        if(!file.isEmpty()){            try{                byte[] arr = new byte[1024];                BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(file1234));                bos.write(arr);                bos.flush();                bos.close();            }catch(Exception e){                header.put("code", "-1");                header.put("msg", "errorMsg:" + e.getMessage());            }        }else{            header.put("code", "-1");            header.put("msg", "errorMsg:上传文件失败，因为文件是空的");        }        String returnStr = returnObj.toJSONString(header);        return returnStr;    }}

阅读全文

1 0