文章詳情頁

使用ajax跨域調(diào)用springboot框架的api傳輸文件

瀏覽：467日期：2022-06-11 17:47:45

在新項目中使用的是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>
   <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!
 *
 */

@SpringBootApplication
public class App 
{

  public static void main( String[] args )
  {
    SpringApplication.run(App.class, args);
  }
  //設(shè)置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();
    //設(shè)置上傳文件大小限制
    factory.setMaxFileSize("10MB");
    //設(shè)置上傳總數(shù)據(jù)大小
    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){ 
    // 返回結(jié)果用 json對象
    JSONObject returnObj = new JSONObject();
    //從請求中獲取請求的json字符串
    String strData = req.getParameter("data");
    //將獲取到的JSON字符串轉(zhuǎn)換為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());
    //插入數(shù)據(jù)的影響的數(shù)據(jù)條數(shù)
    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;
  }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持。

Ajax

上一條：ThinkPHP5 通過ajax插入圖片并實(shí)時顯示(完整代碼)下一條：bootstrap select2 動態(tài)從后臺Ajax動態(tài)獲取數(shù)據(jù)的代碼

相關(guān)文章：

1. ASP.NET MVC使用JSAjaxFileUploader插件實(shí)現(xiàn)單文件上傳2. 使用AJAX實(shí)現(xiàn)上傳文件3. AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺】4. 淺析Django 接收所有文件,前端展示文件（包括視頻，文件，圖片）ajax請求5. Ajax?請求隊列解決方案并結(jié)合elementUi做全局加載狀態(tài)6. 如何通過axios發(fā)起Ajax請求(最新推薦)7. Ajax登陸使用Spring Security緩存跳轉(zhuǎn)到登陸前的鏈接8. ajax實(shí)現(xiàn)頁面的局部加載9. Ajax返回值類型與用法實(shí)例分析10. js實(shí)現(xiàn)ajax的用戶簡單登入功能

排行榜

					
					ASP.NET MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁
如何在在Vue3中使用markdown 編輯器組件
Android SeekBar實(shí)現(xiàn)平滑滾動
每日幾道java新手入門面試題,通往自由的道路
詳解ABP框架中的日志管理和設(shè)置管理的基本配置
Django實(shí)現(xiàn)任意文件上傳（最簡單的方法）
淺談vue中g(shù)et請求解決傳輸數(shù)據(jù)是數(shù)組格式的問題
Java并發(fā)編程必備之Future機(jī)制
vue 如何使用遞歸組件
ASP.NET MVC使用JSAjaxFileUploader插件實(shí)現(xiàn)單文件上傳
使用ajax跨域調(diào)用springboot框架的api傳輸文件
				