springboot 异步上传图片

分手后的思念是犯贱 2022-05-16 13:20 345阅读 0赞

我用的是jQuery.ajaxfileupload.js 稍后弄个网盘链接给大家下载

第一步不多说，导入相应的jar包   jquery.js必须先导入再导入jQuery.ajaxfileupload.js

第二步，html中添加控件：

因为初始控件的文件上传样式实在太丑，所以我加了style="opacity:0"用于隐藏，而是另外弄一个div作为显示，通过触发的形式进行上传。

当点击更换图片时触发changeImg()方法，而changeImg()又触发真正的file进行打开选择文件。

当我们选择好图片点击打开时，将会触发οnchange="sendChange()"，该方法调用 fileUpload();也就是真正异步用于处理图片上传的。

完成html，接下来看controller

@Controller
    @RequestMapping("/file")
    public class FileController {
    
        private static final Logger logger = LoggerFactory.getLogger(FileController.class);
    
        //图片上传相关代码
        @RequestMapping(value = "/imgUpLoad")
        @ResponseBody
        public String imgUpLoad(@RequestParam("img") MultipartFile file, HttpServletRequest request) {
            if (file.isEmpty()) {
                return new String("文件为空");
            }
    // 获取文件名
            String fileName = file.getOriginalFilename();
            logger.info("上传的文件名为：" + fileName);
    // 获取文件的后缀名
            String suffixName = fileName.substring(fileName.lastIndexOf("."));
            logger.info("上传的后缀名为：" + suffixName);
            if(".jpg".equals(suffixName.trim())||".png".equals(suffixName.trim())){
    
                // 文件上传后的路径
                String filePath = "D://IDEA//course01//src//main//resources//static//download//img//";//服务器路径
    // 解决中文问题，liunx下中文路径，图片显示问题
    // fileName = UUID.randomUUID() + suffixName;
                fileName=  UUID.randomUUID().toString().replace("-", "")+".png";
                File dest = new File(filePath +fileName);
    // 检测是否存在目录
                if (!dest.getParentFile().exists()) {
                    dest.getParentFile().mkdirs();
    
                }
                try {
                    file.transferTo(dest);
    
                } catch (IllegalStateException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            return new String("上传的不是图片！");
        }
    
    }

以上步骤就能完成该上传功能咯

jQuery.ajaxfileupload.js下载地址

链接：https://pan.baidu.com/s/1uxs9nC60CliFc0xJsQWWrg 密码：u7jt