Ajax跨域上传文件

2018-03-20 21:12:23

1078次阅读

0个评论

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>

Springboot跨域配置：

“*”代表全部。”**”代表适配所有接口。
其中addAllowedOrigin(String origin)方法是追加访问源地址。如果不使用”*”（即允许全部访问源），则可以配置多条访问源来做控制。

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接口：

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

收藏0赞0

请登录后评论。没有帐号？注册一个。

admin

官方人员

0回答
0粉丝
0关注