图片上传的实现的各种坑

注意

String filePath = request.getSession().getServletContext().getRealPath("/");
File dir = new File("filePath ");
这段代码的意思：request.getSession().getServletContext() 获取的是Servlet容器对象，相当于tomcat容器了。getRealPath("/") 获取实际路径，“/”指代项目根目录，所以代码返回的是项目在容器中的实际发布运行的根路径;

在本文中
File dir = new File("filePath");
是直接在项目根目录下创建filePath 文件或文件夹

1.步骤：

把前端的图片传到后端controller，然后截取文件的后缀，用uuid + 上传的文件名后缀拼接成新的图片文件名字，然后把图片文件存到项目根目录的/data/image目录下，在把图片路径存到数据库

上代码：

1.前端图片上传代码：

<c:if test="${not empty n.image}">判断是否有图片，有就显示，没有就不显示；
然后通过<input id="file_upload" type="file" name="file" onchange="imgChange(this)"/>中的onchange="imgChange(this)"方法进行表单验证；让用户选择图片后并能显示，并且获取图片的后缀；

                <label class="col-sm-2 control-label">图片上传</label>
                <div class="col-sm-4">
                    <input id="file_upload" type="file" name="file" onchange="imgChange(this)"/>
                    <c:if test="${not empty n.image}">
                        <img id="uploaded_images" src="${ctx }${n.image}" class="img-rounded" style="width: 150px"/>
                    </c:if>
                    <c:if test="${empty n.image}">
                        <img id="uploaded_images" src="" class="img-rounded" style="width: 150px"/>
                    </c:if>
                    <input name="image" type="hidden" value="${n.image}">
                </div>
            </div>

onchange="imgChange(this)方法的js代码：

    //显示需要上传图片的所路途、图片文件验证
    // 选择图片显示
    function imgChange(obj) {
        // 获取点击的文本框
        var file = document.getElementById("file_upload");
        var fileSize = file.files[0].size;
        //input框内的图片路径值obj.value
        var fileName = obj.value;
        //截取图片文件名的后缀并转为小写
        var fileNameSuffix = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
        // alert(fileNameSuffix);
        //图片文件格式验证
        if(fileNameSuffix !="jpg" && fileNameSuffix !="jpeg" && fileNameSuffix !="png"){
            //清空input框内的图片路径值obj.value
            obj.value = "";
            layer.msg("请选择图片格式文件上传(jpg,jpeg,png等)！");
            return false;
        }
        //文件大小验证
        if(fileSize/1024>1000){
//            file.outerHTML = file.outerHTML;
            //清空input框内的图片路径值obj.value
            obj.value = "";
            layer.msg("图片不能大于1M");
            return false;
        }
        var imgUrl = window.URL.createObjectURL(file.files[0]);
        var img = document.getElementById('uploaded_images');
        img.setAttribute('src', imgUrl); // 修改img标签src属性值
    };

后端保存更新的代码：如果知识图片上传只需关注图片上传的相关代码

     * 保存、更新
     * @param dto
     * @param file
     * @param request
     * @return
     * @throws Exception
     */
    @ResponseBody
    @RequestMapping(value = "/save")
    @PreAuthorize("(hasRole('aboutUs.update') and #dto.id != null) or (hasRole('aboutUs.add') and #dto.id == null)")
    public String save(AboutUsDTO dto, @RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request) throws Exception {
        if(verify(dto,file)){
            if (dto.getId() == null) {
                dto.setCreated(new Date());
                dto.setUpdateTime(new Date());
                dto.setDeleted(false);
                //上传图片
//              uploadImg(file,model,request);
                //上传图片
                String imgPath = saveImgFileAndPath(file,dto,request);
                //保存图片地址
                if(StringUtils.isNotBlank(imgPath)){
                    dto.setImage(imgPath);
                }
                aboutUsService.save(dto);
            } else {
                AboutUs old = aboutUsService.load(dto.getId());
                //set类型
                AboutUsTypeDTO aboutUsTypeDTO = new AboutUsTypeDTO();
                aboutUsTypeDTO.setId(dto.getAboutUsType().getId());
                old.setAboutUsType(aboutUsTypeDTO);
                //set更新的时间
                old.setUpdateTime(new Date());
                //上传图片
                String imgPath = saveImgFileAndPath(file,old,request);
                //保存图片地址
                if(StringUtils.isNotBlank(imgPath)){
                    old.setImage(imgPath);
                }
                old.setDescription(dto.getDescription());
                aboutUsService.updateAllFields(old);
            }
        }
        return ok();
    }

@RequestParam(value = "file", required = false) MultipartFile file中的required = false让file可以没有数据,这样可以避免修改时用户点击上传但并没有选择图片时提交而报错；
String imgPath = saveImgFileAndPath(file,dto,request);这个方法把图片文件保存到@Value("${image.upload.path}") private String path;这个路径中,文件名字是uuid+图片的后缀;

saveImgFileAndPath方法：

     * 保存图片文件并且获取图片地址
     * @param file
     * @param model
     * @param request
     * @return
     */
    public String saveImgFileAndPath(MultipartFile file, AboutUs model, HttpServletRequest request){
        if(file != null) {
            String fileName = file.getOriginalFilename();
            String newFileName = FileNameUtils.getFileName(fileName);
            //保存图片文件
            String imgPath = upload(newFileName, request, file);
            if(StringUtils.isNotBlank(imgPath)){
                String imgName = imgPath.substring(imgPath.lastIndexOf("/"));
                imgPath = path.substring(path.lastIndexOf("/"));
                return imgPath+imgName;
            }
        }
        return null;
    }

//保存图片文件
String imgPath = upload(newFileName, request, file);

方法的代码：

     * @author huZhiQiang
     * 把图片文件保存到${image.upload.path}目录下
     * request.getSession().getServletContext().getRealPath() 得到站点的绝对地址
     * @param newFileName
     * @param request
     * @param file
     * @return
     */
    public String upload(String newFileName, HttpServletRequest request,MultipartFile file){
        String contentType = file.getContentType();
        String fileName = file.getOriginalFilename();
        logger.error("contentType", contentType);
        logger.error("filename1:" + fileName);
        logger.error("filePath1:" + path);
//      String newFileName = "";
        if(StringUtils.isNotBlank(fileName)){
            try {
                /*FileUtils.upload(file.getBytes(), path, newFileName);*/
                String imgPath = imageService.saveImage(newFileName,file.getBytes());//保存图片文件
                // 拼接图片url
//              String imgHost = MyWebUtils.getCtx();
//              String imgUploadPath = path;
//              String imgName = newFileName;
//              String imgPath = imgHost + imgUploadPath + "/" + imgName;
                logger.error("拼接好的图片上传路径为：" + imgPath);

                return imgPath;
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return null;
    }

imageService.saveImage(newFileName,file.getBytes())的代码：

     * 上传图片并返回完整访问路径
     * 
     * @return
     */
    public String saveImage(String fileName, byte[] data) {
        if (uploadType == UPLOAD_TYPE_LOCAL) {
            if (StringUtils.isBlank(fileName) || !fileName.contains(".")) { // 为空或没有后缀
                fileName = UUID.randomUUID().toString();
            } else {
                fileName = UUID.randomUUID().toString() + fileName.substring(fileName.lastIndexOf("."));
            }

            File dir = new File(imagePath);
            if (!dir.exists()) {
                dir.mkdirs();
            }
            if (!dir.exists()) {
                throw new BizException("无法创建图片上传路径" + imagePath);
            }
            try {
                FileUtils.writeByteArrayToFile(new File(dir, fileName), data);
                return MyWebUtils.getCtx() + "/image/" + fileName;
            } catch (IOException e) {
                throw new BizException("保存图片失败:" + e.getMessage(), e);
            }
        } else if (uploadType == UPLOAD_TYPE_CDN) {
            return qiniuService.upload(data, fileName);
        } else {
            throw new BizException("图片上传配置错误");
        }
    }

搞定！！！