快捷導(dǎo)航

axios實現(xiàn)簡單文件上傳功能

更新時間：2019年09月25日 09:44:52 作者：pia_082

這篇文章主要為大家詳細(xì)介紹了axios實現(xiàn)簡單文件上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

前臺頁面：

引入axios js文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

HTML:

<input type="file" name="img"/>
<br>
<span οnclick="upload()">上傳圖片</span>

JS:

function upload() {
 alert("上傳")
 let file = document.getElementsByName('img')[0].files[0];
 
 let formData = new FormData();
 formData.append("uploadFile",file,file.name);
 
 const config = {
 headers: { "Content-Type": "multipart/form-data;boundary="+new Date().getTime() }
 };
 
 axios
 .post("/file/upload",formData,config)
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
}

后臺接收：

@PostMapping(value = "/upload")
public String upload(HttpServletRequest request){
 logger.info("開始上傳……");
 
 MultipartHttpServletRequest servletRequest = (MultipartHttpServletRequest) request;
 Map<String, MultipartFile> fileMap = servletRequest.getFileMap();
 for (Map.Entry entry : fileMap.entrySet()) {
 logger.info("name : {}",entry.getKey());
 MultipartFile multipartFile = (MultipartFile) entry.getValue();
 try {
  FileUtil.writeFile(multipartFile.getInputStream(),path+"/12_"+multipartFile.getOriginalFilename());
 } catch (IOException e) {
  e.printStackTrace();
 }
 }
 return "{'result':'OK'}";
}
 
 
@RequestMapping(value = "/uploadII")
public String uploadII(@RequestParam("uploadFile") MultipartFile uploadFile){
 logger.info("upload : {}",uploadFile);
 try {
 InputStream inputStream = uploadFile.getInputStream();
 String originalFilename = uploadFile.getOriginalFilename();
 logger.info("file : {}",originalFilename);
 FileUtil.writeFile(inputStream,path+"/"+originalFilename);
 } catch (IOException e) {
 e.printStackTrace();
 }
 return "{'result':'OK'}";
}

pox.xml:

<!-- 文件上傳 -->
<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3</version>
</dependency>

注入CommonsMultipartResolver:

@Bean
public CommonsMultipartResolver initCommonsMultipartResolver(){
 CommonsMultipartResolver resolver = new CommonsMultipartResolver();
 resolver.setMaxUploadSize(104857600);
 resolver.setMaxInMemorySize(4096);
 return resolver;
}

GitHub：axios

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

您可能感興趣的文章:

相關(guān)文章

JS實現(xiàn)jQuery的append功能
jQuery中可以直接使用$el.append()為元素添加字符串型dom, 但是最近轉(zhuǎn)戰(zhàn)Vue, 再使用jQuery明顯不合適了, 所以通過查找資料, 封裝一個可以實現(xiàn)同樣效果的方法.
2021-05-05
js判斷為空Null與字符串為空簡寫方法
最近開始研究JavaScript的簡寫方法，下面就是有關(guān)判斷為空的簡寫方法
2014-02-02
uniapp調(diào)用手機(jī)相機(jī)進(jìn)行拍照的兩種方式
這篇文章主要給大家介紹了關(guān)于uniapp調(diào)用手機(jī)相機(jī)進(jìn)行拍照的兩種方式,在uniapp中有多種方式可以調(diào)用相機(jī)進(jìn)行拍照,文中介紹了兩種方法,需要的朋友可以參考下
2023-09-09
JS 60秒后重新發(fā)送驗證碼的實例講解
下面小編就為大家?guī)硪黄狫S 60秒后重新發(fā)送驗證碼的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
JS使用遮罩實現(xiàn)點(diǎn)擊某區(qū)域以外時彈窗的彈出與關(guān)閉功能示例
這篇文章主要介紹了JS使用遮罩實現(xiàn)點(diǎn)擊某區(qū)域以外時彈窗的彈出與關(guān)閉功能,結(jié)合實例形式分析了javascript事件響應(yīng)及頁面元素屬性動態(tài)操作彈出與關(guān)閉遮罩層相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-07-07
Iphone手機(jī)、安卓手機(jī)瀏覽器控制默認(rèn)縮放大小的方法總結(jié)（附代碼）
這篇文章主要介紹了Iphone手機(jī)、安卓手機(jī)瀏覽器控制默認(rèn)縮放大小的方法，通過meta標(biāo)簽中添加屬性代碼展示控制瀏覽器的默認(rèn)縮放，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
2017-08-08
javascript中Math.random()使用詳解
Math.random() 這個方法相信大家都知道，是用來生成隨機(jī)數(shù)的。不過一般的參考手冊時卻沒有說明如何用這個方法來生成指定范圍內(nèi)的隨機(jī)數(shù)。這次我就來詳細(xì)的介紹一下Math.random()，以及如何用它來生成制定范圍內(nèi)的隨機(jī)數(shù)。
2015-04-04
原生js實現(xiàn)隨機(jī)點(diǎn)名
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)隨機(jī)點(diǎn)名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
基于el-slider實現(xiàn)一個能拖動的時間范圍選擇器
這篇文章主要介紹了基于el-slider實現(xiàn)一個能拖動的時間范圍選擇器,并通過實例代碼介紹了基于element-ui el-slider實現(xiàn)滑動限位器的方法,需要的朋友可以參考下
2024-02-02
JSONP原理及應(yīng)用實例詳解
這篇文章主要介紹了JSONP原理及應(yīng)用實例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09