Axios和Jquery實現(xiàn)文件上傳功能

更新時間：2022年08月15日 10:44:21 作者：DanceDonkey

這篇文章主要為大家詳細介紹了Axios+Jquery實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

Jquery上傳

jquery文件時，后端好像并沒有經(jīng)過SpringMVC處理，沒有被封裝成一個MultiPartFIle對象，可通過原生的Servlet API request.getInputStream()獲取。至于為什么沒被SpringMVC封裝成MultipartFile對象目前還沒有研究透徹?？赡苁钦埱髢?nèi)容類型沒有設(shè)置成 multipart/form-data。下面是jquery上傳文件的代碼示例，文件名，文件大小等參數(shù)可通過拼在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('上傳結(jié)果' + 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。后續(xù)會深入研究·······…

Axios上傳

axios上傳不同于jquery，axios將上傳的二進制數(shù)據(jù)和其他參數(shù)封裝在了FormData對象中，值得注意的是，此時的內(nèi)容類型要改為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('上傳結(jié)果' + 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這種，明確指定了內(nèi)容類型并且經(jīng)過了SpringMVC處理。

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

您可能感興趣的文章: