axios實(shí)現(xiàn)簡(jiǎn)單文件上傳功能
本文實(shí)例為大家分享了axios實(shí)現(xiàn)文件上傳功能的具體代碼,供大家參考,具體內(nèi)容如下
前臺(tái)頁(yè)面:
引入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);
});
}
后臺(tái)接收:
@PostMapping(value = "/upload")
public String upload(HttpServletRequest request){
logger.info("開(kāi)始上傳……");
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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條
- Vue實(shí)現(xiàn)帶進(jìn)度條的文件拖動(dòng)上傳功能
- 使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條功能
- Vue axios 中提交表單數(shù)據(jù)(含上傳文件)
- vue使用axios上傳文件(FormData)的方法
- vue項(xiàng)目中使用axios上傳圖片等文件操作
- vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
- vue-cli+axios實(shí)現(xiàn)文件上傳下載功能(下載接收后臺(tái)返回文件流)
- axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能
- Vue+Axios實(shí)現(xiàn)文件上傳自定義進(jìn)度條
相關(guān)文章
JS實(shí)現(xiàn)jQuery的append功能
jQuery中可以直接使用$el.append()為元素添加字符串型dom, 但是最近轉(zhuǎn)戰(zhàn)Vue, 再使用jQuery明顯不合適了, 所以通過(guò)查找資料, 封裝一個(gè)可以實(shí)現(xiàn)同樣效果的方法.2021-05-05
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ā)送驗(yàn)證碼的實(shí)例講解
下面小編就為大家?guī)?lái)一篇JS 60秒后重新發(fā)送驗(yàn)證碼的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
JS使用遮罩實(shí)現(xiàn)點(diǎn)擊某區(qū)域以外時(shí)彈窗的彈出與關(guān)閉功能示例
這篇文章主要介紹了JS使用遮罩實(shí)現(xiàn)點(diǎn)擊某區(qū)域以外時(shí)彈窗的彈出與關(guān)閉功能,結(jié)合實(shí)例形式分析了javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作彈出與關(guān)閉遮罩層相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07
Iphone手機(jī)、安卓手機(jī)瀏覽器控制默認(rèn)縮放大小的方法總結(jié)(附代碼)
這篇文章主要介紹了Iphone手機(jī)、安卓手機(jī)瀏覽器控制默認(rèn)縮放大小的方法,通過(guò)meta標(biāo)簽中添加屬性代碼展示控制瀏覽器的默認(rèn)縮放,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08
原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07
基于el-slider實(shí)現(xiàn)一個(gè)能拖動(dòng)的時(shí)間范圍選擇器
這篇文章主要介紹了基于el-slider實(shí)現(xiàn)一個(gè)能拖動(dòng)的時(shí)間范圍選擇器,并通過(guò)實(shí)例代碼介紹了基于element-ui el-slider實(shí)現(xiàn)滑動(dòng)限位器的方法,需要的朋友可以參考下2024-02-02

