前端代码
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" width="200px" height="200px">
<p id="demoText"></p>
</div>
</div>
JS代码
<script>
layui.config({
base: '/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'upload'], function(){
var $ = layui.jquery
,form = layui.form
,layer = layui.layer
,upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '/admin/goods/upload' //改成您自己的上传接口
// ,auto:false // 不自动上传
// ,bindAction: '#LAY-user-back-submit' // 绑定上传按钮
,accept: 'images' // 只允许上传图片
,acceptMime: 'image/*' // 打开文件选择器时只显示图片
,choose: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//如果上传失败
if(res.code < 0){
return layer.msg('上传失败');
}
return layer.msg('上传成功');
//上传成功
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
</script>
后端代码
文件上传相关操作,这里只是用来说明单文件上传用MultipartFile file
,参数名为file
,layui文件上传文件的参数名为file
@RequestMapping("/admin/goods")
@Controller
@Slf4j
public class GoodsController {
@Autowired
GoodsService goodsService;
/**
* 文件上传
* @param file
* @param request
* @return
*/
@ResponseBody
@RequestMapping("/upload")
public Object upload(MultipartFile file, HttpServletRequest request){
String fileName = file.getOriginalFilename();
log.info("图片名称:{}",fileName);
// 文件上传相关操作,这里只是用来说明单文件上传用MultipartFile file来接收
return ResponseDataUtil.ok();
}
若要修改后台参数名,可以使用@RequestParam("file")
/**
* 文件上传
* @param image
* @param request
* @return
*/
@ResponseBody
@RequestMapping("/upload")
public Object upload(@RequestParam("file") MultipartFile image, HttpServletRequest request){
String fileName = image.getOriginalFilename();
log.info("图片名称:{}",fileName);
return ResponseDataUtil.ok();
}
自己写的图片上传后端代码
/**
* 图片上传
* @param image
* @param request
* @return
*/
@ResponseBody
@RequestMapping("/upload")
public Object upload(@RequestParam("file") MultipartFile image, HttpServletRequest request) {
// 获取当前登录的管理员信息
MallAdmin admin = (MallAdmin) request.getSession().getAttribute(AdminStatuUtil.SESSION_LOGIN_ADMIN_PARAM);
// 获取时间戳
SimpleDateFormat format = new SimpleDateFormat("yyMMddHHmmss");
String dateTime = format.format(new Date()).toString();
// 获取文件名
String filename = image.getOriginalFilename();
// 生成新的文件名
String newImageName = admin.getUsername()+dateTime+filename;
// 文件存储路径
String path = FileUtil.PATH + newImageName;
try {
// 创建新文件
File file = new File(path);
// 图片传输至新文件
image.transferTo(file);
HashMap<String, Object> map = new HashMap<>();
// 返回图片路径
map.put("path",path);
return ResponseDataUtil.ok(map);
} catch (IOException e) {
e.printStackTrace();
}
return ResponseDataUtil.fail("上传失败");
}