快捷導(dǎo)航

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

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

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

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

Jquery上傳

jquery文件時(shí)，后端好像并沒(méi)有經(jīng)過(guò)SpringMVC處理，沒(méi)有被封裝成一個(gè)MultiPartFIle對(duì)象，可通過(guò)原生的Servlet API request.getInputStream()獲取。至于為什么沒(méi)被SpringMVC封裝成MultipartFile對(duì)象目前還沒(méi)有研究透徹。可能是請(qǐng)求內(nèi)容類(lèi)型沒(méi)有設(shè)置成 multipart/form-data。下面是jquery上傳文件的代碼示例，文件名，文件大小等參數(shù)可通過(guò)拼在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>

請(qǐng)上傳圖片：<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";
? ? }

此時(shí)后臺(tái)打印的multipartfile是null。后續(xù)會(huì)深入研究·······…

Axios上傳

axios上傳不同于jquery，axios將上傳的二進(jìn)制數(shù)據(jù)和其他參數(shù)封裝在了FormData對(duì)象中，值得注意的是，此時(shí)的內(nèi)容類(lè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>

請(qǐng)上傳圖片：<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";
? ? }

感覺(jué)還是更喜歡axios這種，明確指定了內(nèi)容類(lèi)型并且經(jīng)過(guò)了SpringMVC處理。

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

您可能感興趣的文章: