关于图片上传的实例

本案例使用springboot1.5版本进行总结，实际跟框架版本关系不大；

关于页面：

<input type="file" id="imgFileBtn" οnchange="uploadImage.changeFile(this)" alt="" accept="image/*" style="display: none;"  />
<input type="hidden" id="imgJsonStr" name="imgJsonStr" />

<div class="col-sm-2">
    <input type="hidden" id="registImgType" th:value="1" />
    <input type="hidden" id="registImgUrl"  />
    <img class="img-thumbnail" id="registImg" name="registImg" style="width: 150px;height: 150px;" />
    <strong style="float: right;padding-right: 80px;" th:text="违章凭证"></strong>
    <input type="button"  th:οnclick="'javascript:uploadImage.selectImage(\'registImg\')'"
           class="btn btn-success" name="certificateStateBtn" style="float: right;margin: 10px 90px;" th:value="选择" />
</div>
主要是一些标签的使用 合理的展示；

关于js脚本：

var uploadImage = {
        constant: {
            uploadUrl: CUR_PATH + "/img/imgUpload", //图片上传
            imgSrcUrl: CUR_PATH + "/img/resImage?path=", //获取图片
            imgDefUrl: CUR_PATH + "/webapp/common/img/noimg.png",  //默认图片路径
            imgEmptyUrl: "/webapp/common/img/noimg.png"
        },
        valid: function(file){
           if(file.size > (3 * 1024 * 1024)){
               u.alert("图片大小不能超过3M");
               return false;
           }

           var suffix = file.name.substr(file.name.lastIndexOf('.')+1).toLowerCase();
           if(suffix!='png'&&suffix!='gif'
               &&suffix!='jpg'&&suffix!='jpeg'){
               u.alert("上传文件不是常用图片后缀(png,gif,jpg,jpeg),请确认");
               return false;
           }

           return true;

        },
        upload:function(imgId ,file){
            var imageForm = new FormData();
            imageForm.append('fileName', file);
            $.ajax({
                type: 'POST',
                url: uploadImage.constant.uploadUrl,
                data: imageForm,
                async: false,
                processData: false,  // 告诉jQuery不要去处理发送的数据
                contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                success: function (data) {
                    if(data.code == 1){
                        var imgSrc = uploadImage.constant.imgSrcUrl + data.re;
                        $("#"+imgId+"Url").val(data.re);
                        $("#"+imgId).attr("src",imgSrc);
                        // u.alert("上传成功");
                    }else{
                        u.alert("上传失败");
                    }
                }
            });
        },
        selectImage: function (idBtn) {
            $("#imgFileBtn").attr("alt", idBtn);
            $("#imgFileBtn").click();
        },
        changeFile:function(event){
             var file = event.files[0];
             var imgId = event.alt;
             if(uploadImage.valid(file)){
                 uploadImage.upload(imgId, file);
             }
            $("#imgFileBtn").val('');
        },
        getImageJsonArray:function(imgName){
            var imgArray =  [];
            if($("img[name=\'"+imgName+"\']").length <= 1){
                if($('#'+imgName+'Url').val()!=''
                    && $('#'+imgName+'Url').val() != uploadImage.constant.imgEmptyUrl){
                }
                imgArray.push(getImgJsonObject(imgName));
            }else{
                $("img[name=\'"+imgName+"\']").each(function(index,obj){

                    imgArray.push(getImgJsonObject(imgName + (index+1)));
                });
            }
            return imgArray;
        },
        clearImg: function(imgName){
            $("img[name=\'"+imgName+"\']").each(function(index,obj){
                $('#'+imgName+(index+1)+'Url').val('');
                obj.src = uploadImage.constant.imgDefUrl;
            });
        }
    };

/**
 * 组装json对象
 * @param imgName
 * @returns {{id: (*|jQuery), bussId: *, ucpCarId: Document.ucpCarId,
 * attachmentType: (*|jQuery), number: (*|jQuery), url: (*|jQuery)}}
 */
function getImgJsonObject(imgName){

    var jsonRow = {
        attachmentType: $('#'+imgName+'Type').val(),
        url: $('#'+imgName+'Url').val()
    };
    return jsonRow;
}

主要涉及upload路径，页面展示控制，json串的拼接 送到后台操作，图片大小限制等，

var handleImgUrl = function(){

    //handle img url
    var registImgArray = [];
    var registImg2Array = [];
    var img = [];
    if ( $("#status").val() == noHandleFlag) {
        registImgArray = uploadImage.getImageJsonArray('registImg');
        img = img.concat(registImgArray);
    } else if ($("#status").val() == handledFlag) {
        registImgArray = uploadImage.getImageJsonArray('registImg');
        registImg2Array = uploadImage.getImageJsonArray('registImg2');
        img = img.concat(registImgArray, registImg2Array);
    } else {
        u.alert("处理状态不能为空");
        return;
    }

    var jsonStr = JSON.stringify(img);
    $("#imgJsonStr").val(jsonStr);

};



最后就是后台java处理了：

@Slf4j
@Controller
@RequestMapping("img/")
public class ImgController {

    /**
     * @Description: 流的方式响应页面路
     * @Date: 2018/9/20 上午9:35
     */
    @ResponseBody
    @RequestMapping("resImage")
    public void resImageFromStream(String path,HttpServletResponse response) {

        if (StringUtils.isNotEmpty(path)){

            List<String> names = new ArrayList<>();
            names.add(path);
            List<byte[]> fileNames = FileUtil.getStreamFromPdfs(names);
            CommonUtils.setContentType(response,path);
            try {
                OutputStream output = response.getOutputStream();
                output.write(fileNames.get(0));
                output.flush();

                response.flushBuffer();
                output.close();
            }catch (IOException e){
                log.error("展示图片异常：{}",e);
            }
        }

    }

    @RequestMapping("imgUpload")
    @ResponseBody
    public Res imgUpload(@RequestParam(value = "fileName") MultipartFile multipartFile){
        String imgName = FileUtil.pdfsUploadFile(multipartFile);
        return Res.suc(imgName);
    }

　　//util function

public static String pdfsUploadFile(MultipartFile file){
    //准备二进制数据
    byte[] bytes;
    String storeName = StringUtils.EMPTY;
    try {
        bytes = file.getBytes();


        //获取原文件名
        String fileName = file.getOriginalFilename();
        //文件后缀包括"."
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        //新文件名
        String newFileName = UUID.randomUUID().toString() + suffixName;

        //准备pdfs业务vo
        PDFSUploadVO vo = new PDFSUploadVO();
        vo.setName(newFileName);//设置存储图片名
        vo.setData(bytes);//设置图片的二进制数据

        PDFSUploadResultVO res = PDFSClient.upload(vo);//调用PDFSClient完成上传
        storeName=res.getNames().get("ORIGINAL");//返回给调用端的文件名
      }catch (IOException e){
        e.printStackTrace();
        log.error("图片上传到pdfs时异常");
      }


    return storeName;
}

}

其中图片路径存储的方法不再多写，主要根据业务模式 可以一对一的存储，也可一对多个字段 达到一对一的图片存储数据效果；




人生苦短，学会看淡一些条条框框、享受一些让自己心情愉悦的事情、莫使金樽空对月；

转载于:https://www.cnblogs.com/beixiaoyi/p/9995305.html