通过ajax跨域请求传输formdata,使用ajax跨域调用springboot框架的api传输文件

这篇文章主要介绍了使用ajax跨域调用springboot框架的api传输文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

首先是前台页面的代码

test_api

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);

}

});

}

sCompany:
scardtype:
file:

程序入口类的代码

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!

*

*/

@SpringBootApplication

public 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 files = ((MultipartHttpServletRequest)req).getFiles("file");

MultipartFile file = files.get(0);

// 返回信息头部

Map header = new HashMap();

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;

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

来源：脚本之家

链接：https://www.jb51.net/article/177174.htm

申请创业报道，分享创业好点子。点击此处，共同探讨创业新机遇！