基于ssm的文件上传到服务器,存入数据库
- 在maven中导入依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>${commons-fileupload.version}</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>${commons-io.version}</version>
</dependency>
- 在spring-mvc配置文件中添加
<bean name="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxInMemorySize" value="1024" />
<property name="defaultEncoding" value="UTF-8" />
<property name="maxUploadSize" value="5000000"/>
</bean>
- 定义上传文件工具类
package com.nz.homework.utils;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.UUID;
public class UploadUtils {
public String upload(String path,MultipartFile multipartFile){
String type = multipartFile.getContentType();
String originalFilename = multipartFile.getOriginalFilename();
if (originalFilename==null){
return null;
}
int hashCode = originalFilename.hashCode();
int dir1 = hashCode & 0xf;
int dir2 = (hashCode & 0xf0) >> 4;
String dir = path + File.separator+dir1 + File.separator + dir2;
把路径丢到File文件中
File file = new File(dir);
if (!file.exists()){
file.mkdirs();
}
String newFileName = UUID.randomUUID().toString().replace("-","")+"."+originalFilename.substring(originalFilename.lastIndexOf(".")+1);
InputStream is = null;
OutputStream os = null;
try {
is = multipartFile.getInputStream();
os = new FileOutputStream(dir+File.separator+newFileName);
FileCopyUtils.copy(is,os);
} catch (IOException e) {
e.printStackTrace();
}finally {
if (is!=null){
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (os!=null){
try {
os.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return dir1+File.separator+dir2+File.separator+newFileName;
}
}
- 在service的实现类中实现
@Service("/bookService")
public class BookServiceImpl implements BookService {
private static final String UPLOAD_DIR= "D:\\code\\week15\\practice\\src\\main\\webapp\\upload";
private UploadUtils uploadUtils = new UploadUtils();
@Resource
BookMapper bookMapper;
@Override
public int insertBook(MultipartFile multipartFile, Book book) {
String newPath = uploadUtils.upload(UPLOAD_DIR, multipartFile);
book.setImg(newPath);
return bookMapper.addBook(book);
}
}
- controller层代码
@RequestMapping("/addBook")
public Result addBook(MultipartFile multipartFile, Book book){
try {
if (multipartFile.isEmpty()){
return Result.error();
}
int rows = bookService.insertBook(multipartFile,book);
return Result.success(rows);
} catch (Exception e) {
log.error(e.getMessage());
}
return Result.error();
}
- entity层代码
@Data
public class Book {
private Integer bid;
private String name;
private String author;
private Double price;
private Date crtTime;
private String Img;
}
配置tomcat虚拟路径
- 第一步
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b5a269fe5e7e6185e53fb7adabbc66cd.png)
- 第二步,点击External Souce
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ac6f2eb7a16872630d163f253ebd4df4.png)
- 第三步,选择要上传的位置,我的web下的upload,点击upload,然后重启tomcat即可
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d0c16d47e41230789069a59cf3aae332.png)
前端中的form表单结合FormData
<!DOCTYPE html>
<html lang="en" xmlns:border="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$("#upload").click(function () {
var formData = new FormData($('#uploadForm')[0]);
console.log(formData.get("file"))
if (formData ==={} || formData===""){
alert("请选择文件")
}
formData.append("multipartFile",formData.get("file"));
formData.append("name","龙哥传");
formData.append("author","龙哥");
formData.append("price","10.33");
formData.append("img","");
$.ajax({
type: 'post',
url: "http://localhost:8080/practice/book/addBook",
data: formData,
cache: false,
processData: false,
contentType: false,
success:(function (results) {
if (results.data!==0 || results.status === 200){
alert("成功")
}
}),
error:(function () {
alert("上传失败");
}),
});
});
});
</script>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
文件:<input id="file" type="file" name="file"/>
</form>
<button id="upload">上传文件</button>
</body>
</html>