帮我写一个layui+ssm上传图片保存到文件夹然后记录存到数据库的代码
时间: 2023-12-16 11:57:16 浏览: 37
好的,我可以为您提供一个简单的 layui+ssm 上传图片保存到文件夹并记录到数据库的代码示例。
前端页面代码:
```html
<div class="layui-upload">
<button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="uploadImg">
<p id="uploadText"></p>
</div>
</div>
```
其中,`layui-upload` 是 layui 自带的上传组件,`layui-btn` 是 layui 的按钮样式。
然后,我们需要引入 layui 的上传组件和表单组件,并且在 JavaScript 中配置上传接口和回调函数:
```javascript
layui.use(['upload', 'form'], function(){
var upload = layui.upload;
var form = layui.form;
//执行上传图片操作
var uploadInst = upload.render({
elem: '#uploadBtn', //绑定元素
url: '/upload', //上传接口
done: function(res){
//上传成功后的回调函数
console.log(res);
if(res.code == 0){
//上传成功,显示图片
$('#uploadImg').attr('src', res.data.src); //图片链接(base64)
$('#uploadText').html(res.msg);
//将图片路径存入隐藏域中,方便后台获取
$('#imgPath').val(res.data.path);
} else {
//上传失败
$('#uploadText').html(res.msg);
}
},
error: function(){
//请求异常的回调函数
$('#uploadText').html('上传失败,请重试!');
}
});
//监听表单提交
form.on('submit(saveBtn)', function(data){
//表单提交时,将图片路径提交到后台
var imgPath = $('#imgPath').val();
if(!imgPath){
layer.msg('请先上传图片');
return false;
}
data.field.imgPath = imgPath;
//此处省略其他表单项的验证和提交操作
//……
});
});
```
在后端代码中,我们需要定义一个上传接口 `/upload`,并在该接口中实现图片上传、保存到文件夹和记录到数据库的操作。这里我使用了 SpringMVC 框架和 Commons FileUpload 组件来实现文件上传操作,使用了 MyBatis 框架来实现数据库操作。
后端代码:
```java
@Controller
public class UploadController {
@Autowired
private ProductService productService;
@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public Result upload(@RequestParam("file") MultipartFile file) {
Result result = new Result();
String fileName = file.getOriginalFilename();
String fileType = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if (!"jpg".equals(fileType) && !"jpeg".equals(fileType) && !"png".equals(fileType) && !"gif".equals(fileType)) {
//文件格式不支持
result.setCode(-1);
result.setMsg("文件格式不支持");
return result;
}
String filePath = "D:/upload/"; //文件存储路径,根据实际情况修改
File destFile = new File(filePath + fileName);
try {
file.transferTo(destFile); //保存文件到本地
} catch (IOException e) {
e.printStackTrace();
result.setCode(-1);
result.setMsg("文件上传失败,请重试");
return result;
}
//保存图片到数据库
Product product = new Product();
product.setImgPath(destFile.getPath());
productService.addProduct(product);
//返回结果
result.setCode(0);
result.setMsg("上传成功");
Map<String, Object> data = new HashMap<>();
data.put("src", "data:image/" + fileType + ";base64," + Base64Utils.encodeToString(file.getBytes())); //返回 base64 编码的图片数据
data.put("path", destFile.getPath()); //返回图片存储路径
result.setData(data);
return result;
}
}
```
其中,`ProductService` 是一个用于处理产品信息的 Service,`addProduct()` 方法用于将产品信息保存到数据库中。`Result` 是一个自定义的返回结果类,用于封装上传操作的返回结果。
注意:由于这里使用了绝对路径来存储文件,所以需要确保上传目录存在,并且具有写权限。
这就是一个简单的 layui+ssm 上传图片保存到文件夹并记录到数据库的代码示例,希望能够对您有所帮助。