SpringMVC异步实现多图片上传至本地服务器

本文详细介绍了如何使用SpringMVC实现异步上传多张图片到本地服务器,包括pom依赖、SpringMVC配置、静态资源导入、upload.jsp页面展示以及Controller部分的逻辑代码。通过Ajax提交表单,实现图片预览和删除功能。
摘要由CSDN通过智能技术生成

今天又闲了一天,没事总结了一下SpringMVC异步上传的例子。。。

前段时间写一个上传到oss的例子,今天写一个上传到本地猫的例子把。。。。

准备工作

由于项目使用了maven,在这里先说下使用jar。

1.pom依赖

	<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.4</version>
		</dependency>
		<dependency>
			<!-- 文件上传 -->
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.2.2</version>
		</dependency>
	
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.8</version>
		</dependency>

由于项目使用了ajax所以导入fastjson

2.SpringMVC配置

	<!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 -->
	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="defaultEncoding" value="utf-8" />
		<property name="maxUploadSize" value="10485760000" />
		<property name="maxInMemorySize" value="40960" />
	</bean>

3.静态资源导入

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,下面是一个使用SpringMVC和Vue.js实现图片上传的示例代码: 前端页面代码(使用Vue.js): ```html <template> <div> <input type="file" ref="fileInput" @change="handleFileUpload" multiple> <button @click="uploadFiles">上传文件</button> </div> </template> <script> export default { data() { return { files: [] } }, methods: { handleFileUpload() { this.files = this.$refs.fileInput.files; }, uploadFiles() { let formData = new FormData(); for (let i = 0; i < this.files.length; i++) { formData.append("files", this.files[i]); } axios.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data" } }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); } } } </script> ``` 后端代码(使用SpringMVC): ```java @PostMapping("/upload") @ResponseBody public List<String> upload(@RequestParam("files") MultipartFile[] files) throws IOException { List<String> fileNames = new ArrayList<>(); for (MultipartFile file : files) { if (!file.isEmpty()) { String fileName = file.getOriginalFilename(); String uuid = UUID.randomUUID().toString(); String saveFileName = uuid + "_" + fileName; file.transferTo(new File("/path/to/save/" + saveFileName)); fileNames.add(saveFileName); } } return fileNames; } ``` 这个示例代码使用了Vue.js来实现前端页面的交互,使用了axios库来发送文件上传请求。后端使用了SpringMVC的MultipartFile来处理文件上传请求。在处理每个文件时,可以根据需要对文件进行一些额外的处理,例如:获取文件大小、文件类型等。 希望这个示例代码可以帮助到您!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值