Springboot+Layui图片上传以及预览

最新推荐文章于 2023-09-27 17:25:12 发布

蒙面侠1024

最新推荐文章于 2023-09-27 17:25:12 发布

阅读量656

点赞数 1

CC 4.0 BY-SA版权

分类专栏：毕业设计文章标签： spring boot layui java

本文链接：https://blog.csdn.net/m0_46365614/article/details/125009784

毕业设计专栏收录该内容

2 篇文章

订阅专栏

前端html代码

<div class="layui-col-md3" style="margin-left: 150px;margin-top: 100px">
        <div class="layui-upload-list userFace">
            <input id="imgpath" name="imgpath" type="hidden">
            <div class="layui-upload-list uploader-list" id="userFace" style="overflow: auto;width: 300px">
            </div>
        </div>
        <button class="layui-btn layui-btn-primary userFaceBtn" type="button"><i class="layui-icon">&#xe67c;</i> 上传头像
        </button>
</div>

前端js代码

upload.render({
            elem: ".userFaceBtn",
            url: "/file/uploadFile",
            multiple: true,
            done: function (res) {
                var path = res.path;
                $("#userFace").empty();
                $("#userFace").append('<div class=\"file-iteme\""><div class=\"handle\"></div><img style=\"width: 120px;height: 140px;\" src=\"' + path + '\"></div>');
                //给隐藏域赋值
                $("#imgpath").val(path);
                imgPath=path;
            }
 });

编写配置类，映射本地路径

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

	public static final String UPLOAD_IMAGE_PATH="F:\\IDEA pojiect\\hrm\\src\\main\\resources\\static\\upload\\img";
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //文件磁盘图片url 映射 ，一下位windows下的
        //配置server虚拟路径，handler为前台访问的目录，locations为files相对应的本地路径
        registry.addResourceHandler("/img/**").addResourceLocations("file:"+UPLOAD_IMAGE_PATH+"\\");
    }
}

Controller接收文件代码

@RestController
@RequestMapping("/file")
public class FileController {
	/**
	 * 文件上传
	 */
	@RequestMapping("uploadFile")
	public Map<String, Object> uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
		String fileName = file.getOriginalFilename();
		String suffix = fileName.substring(fileName.lastIndexOf("."));
		fileName = IdUtil.simpleUUID() +suffix;
		File dest = new File(UPLOAD_IMAGE_PATH + "/" + fileName);
		file.transferTo(dest);
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("title",fileName);
		map.put("path","/img" + "/" + fileName);
		map.put("code","0");
		return map;
	}
}