layui的upload实现文件上传详解

最新推荐文章于 2025-04-14 17:30:18 发布

huangxiao776

最新推荐文章于 2025-04-14 17:30:18 发布

阅读量1.8w

点赞数 8

分类专栏： layui 文章标签： upload java layui

本文链接：https://blog.csdn.net/qq_47768542/article/details/113602385

版权

layui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个基于layui框架的图片上传示例，包括前端界面搭建、图片预览、上传功能实现及后端处理流程。前端利用layui组件实现图片上传功能，通过JavaScript处理文件选择和上传逻辑；后端采用Spring MVC框架接收并处理上传的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端代码


<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("上传失败");
    }