ssm+layui实现图片的上传与读取
图片上传确实是一个项目比较核心的技术,我的项目并没有用到传统的富文本上传,而是将图片先热部署到tomcat,在上存储到数据库,读取的时候同样使用此方法。
图片上传
1.设置存放图片的img,以及事件按钮
<div class="layui-form-item">
<label class="layui-form-label">
<span class="x-red">*</span>食品图片
</label>
<div class="layui-upload">
<div class="layui-upload-list">
<img class="layui-upload-img" id="image">
</div>
<label class="layui-form-label">
<span class="x-red"></span>
</label>
<button type="button" class="layui-btn" id="foodimage1">上传图片</button >
</div>
</div>
2.上传与预读
var foodimage='';//全局变量,负责获取相应字段的值
layui.use('upload', function() {
var $ = layui.jquery
, upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#foodimage1'
, url: '/pushingdata/foodimageup' //改成您自己的上传接口
,before: function (obj) {
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#image').attr('src', result);
});
}
, done: function (res) {
foodimage=res.data.src;
//这个就是个消息提示方法可写 可不写
layer.msg('上传成功', {icon: 6});
//上传成功
}
, error: function () {
//演示失败状态,并实现重传
layer.msg("上传失败,请重试!", {icon: 5});
}
});
});
3.后台接口
//上传图片
@RequestMapping("foodimageup")
@ResponseBody
public Map<String, Object> up(MultipartFile file) {
Map<String, Object> map = new HashMap<String, Object>();
Map<String, String> data = new HashMap<String, String>();
//设置图片保存的本地路径 前缀路径
//之前设置Tomcat的imgages路径
String filePath = "D:\\test\\Business_card_system\\web\\static\\image\\";
// 获取原始图片的扩展名
String originalFilename = file.getOriginalFilename();
// 使用uuid生成文件新的名字
String newFileName = UUID.randomUUID() + originalFilename;
//.replace("-", "");去掉UUID的 - 这步可以不写,我不喜欢uuid的 - 符号,所以就去掉了
newFileName = newFileName.replace("-", "");
// 封装上传文件位置的全路径就是前缀加上文件名称
File targetFile = new File(filePath, newFileName);
try {
//保存图片,这里会抛一个异常
file.transferTo(targetFile);
} catch (IOException e) {
e.printStackTrace();
}
map.put("code", 0);
map.put("msg", "");
map.put("data", data);
data.put("src", "http://localhost:8080/image/" + newFileName);
return map;
}
图片读取
1.图片读取相对简单,后台返回的是一个数组,前台直接读取即可
<img class="image" src="" id="image1">
$('#image1').attr('src', data[0].buyimage);
这里有需要注意的只有数组获取值得形式
好了,图片的操作基本完成,待项目完成会把完整项目分享出来。