日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Axios和Jquery實現文件上傳功能_jquery

作者：DanceDonkey ? 更新時間： 2022-10-10 編程語言

本文實例為大家分享了Axios和Jquery實現文件上傳的具體代碼，供大家參考，具體內容如下

Jquery上傳

jquery文件時，后端好像并沒有經過SpringMVC處理，沒有被封裝成一個MultiPartFIle對象，可通過原生的Servlet API request.getInputStream()獲取。至于為什么沒被SpringMVC封裝成MultipartFile對象目前還沒有研究透徹。可能是請求內容類型沒有設置成 multipart/form-data。下面是jquery上傳文件的代碼示例，文件名，文件大小等參數可通過拼在url后面使用request.getParameter()獲取。

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
</head>
<script src="jquery.js"></script>
<script src="axios.js"></script>
<body>

請上傳圖片：<input type="file" name="file" id="file" onchange="fileChange(this)">
<br>

<button onclick="jqueryUpload()">jquery提交</button>

</body>

<script>

? ? var file = undefined

? ? function fileChange(data){
? ? ? ? file = data.files[0]
? ? }

? function jqueryUpload(){
? ? $.ajax({
? ? ? ? url:"/jqueryUpload?filename=test.jpg",
? ? ? ? type:"post",
? ? ? ? data:file,
? ? ? ? contentType:false,
? ? ? ? processData:false,
? ? ? ? success(res){
? ? ? ? ? ? console.log('上傳結果' + res)
? ? ? ? }
? ? })
? }

</script>

</html>
@PostMapping("jqueryUpload")
? ? public String jqueryUpload(HttpServletRequest request, MultipartFile file) throws Exception{
? ? ? ? System.out.println(file);
? ? ? ? String fileDesc = "D:\\2022\\" + request.getParameter("filename");
? ? ? ? FileOutputStream outputStream = new FileOutputStream(fileDesc);
? ? ? ? ServletInputStream inputStream = request.getInputStream();
? ? ? ? byte[] bytes = new ?byte[1024];
? ? ? ? int line = inputStream.read(bytes);
? ? ? ? while (line != -1){
? ? ? ? ? ? outputStream.write(bytes,0,line);
? ? ? ? ? ? line = inputStream.read(bytes);
? ? ? ? }
? ? ? ? inputStream.close();
? ? ? ? outputStream.close();
? ? ? ? return "success";
? ? }

此時后臺打印的multipartfile是null。后續會深入研究·······…

Axios上傳

axios上傳不同于jquery，axios將上傳的二進制數據和其他參數封裝在了FormData對象中，值得注意的是，此時的內容類型要改為multipart/form-data。

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
</head>
<script src="jquery.js"></script>
<script src="axios.js"></script>
<body>

請上傳圖片：<input type="file" name="file" id="file" onchange="fileChange(this)">
<br>

<button onclick="jqueryUpload()">jquery提交</button>
<button onclick="axiosUpload()">axios提交</button>

</body>

<script>

? ? var file = undefined

? ? function fileChange(data){
? ? ? ? file = data.files[0]
? ? }


? function axiosUpload(){
? ? var formData = new FormData();
? ? formData.append("file",file);
? ? formData.append("filename","myfile.jpg")
? ? axios.post("/axiosUpload",formData,{
? ? ? ? headers:{ "Content-Type" : "multipart/form-data" }
? ? }).then(res => {
? ? ? ? console.log('上傳結果' + res)
? ? })
? }

</script>

</html>
@PostMapping("axiosUpload")
? ? public String axiosUpload(HttpServletRequest request,MultipartFile file)throws Exception{
? ? ? ? InputStream inputStream = file.getInputStream();
? ? ? ? String fileDesc = "D:\\2022\\" + request.getParameter("filename");
? ? ? ? FileOutputStream os = new FileOutputStream(fileDesc);
? ? ? ? byte[] bytes = new ?byte[1024];
? ? ? ? int line = inputStream.read(bytes);
? ? ? ? while (line != -1){
? ? ? ? ? ? os.write(bytes,0,line);
? ? ? ? ? ? line = inputStream.read(bytes);
? ? ? ? }
? ? ? ? inputStream.close();
? ? ? ? os.close();

? ? ? ? return "success";
? ? }

感覺還是更喜歡axios這種，明確指定了內容類型并且經過了SpringMVC處理。

原文鏈接：https://blog.csdn.net/qq_43750656/article/details/121426546

欄目分類
最近更新