Explicación detallada de la carga del archivo de implementación de carga de Layui

Código de front-end

<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>

Código 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>

Código de backend

Operaciones relacionadas con la carga de archivos, aquí solo se usa para ilustrar la carga de un solo archivo MultipartFile file, el nombre del parámetro, el nombre del parámetro del filearchivo de carga del archivo layuifile

@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();
    }

Para modificar el nombre del parámetro de fondo, puede utilizar@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();
    }

Escribí mi propio código de back-end de carga de imágenes

    /**
     * 图片上传
     * @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("上传失败");
    }