weui 멀티 이미지 업로드, 압축,base64 인코딩 예시 코드

8855 단어 Weui다그림업로드base64인코딩
수리 기능을 하는 과정을 기록해 보세요. 수요 기능은 간단합니다. 폼 제출, 폼은 간단한 문자 필드와 그림을 포함합니다.
weui 프레임워크를 사용하기 때문에 앞에서 weui의 폼과 그림을 찾아서 구성 요소를 업로드합니다. 솔직히 weui의 구성 요소는 잘 썼습니다. 앞부분을 잘 모르는 찌꺼기로 상자를 열어 사용할 수 있습니다.
주로 그렇게 많은 스타일 문제를 조정하지 않고 바로 코드를 붙인다.

<div class="weui-cell">
 <div class="weui-cell__bd">
  <div class="weui-uploader">
   <div class="weui-uploader__hd">
    <p class="weui-uploader__title"> </p>
    <!--      <div class="weui-uploader__info">0/2</div>-->
   </div>
   <div class="weui-uploader__bd">
    <ul class="weui-uploader__files" id="uploaderFiles">
     <!--<li class="weui-uploader__file" style="background-image:url(/img/upload-btn.png)"></li>
     <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(/img/upload-btn.png)">
      <div class="weui-uploader__file-content">
       <i class="weui-icon-warn"></i>
      </div>
     </li>
     <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(/img/upload-btn.png)">
      <div class="weui-uploader__file-content">50%</div>
     </li>-->
    </ul>
    <div class="weui-uploader__input-box">
     <input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="">
    </div>
   </div>
  </div>
 </div>
</div>

// js
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
 $gallery = $("#gallery"),
 $galleryImg = $("#galleryImg"),
 $uploaderInput = $("#uploaderInput"),
 $uploaderFiles = $("#uploaderFiles");
$uploaderInput.on("change", function(e) {
 var src, url = window.URL || window.webkitURL || window.mozURL,
  files = e.target.files;
 // file
 var fileNum =fileArr.length;
 for(var i = 0, len = files.length; i < len; ++i) {
  var file = files[i];
  if(fileNum + i + 1 > 5) {
   break;
  }
  // fileArr.push(file);
  if(url) {
   src = url.createObjectURL(file);
  } else {
   src = e.target.result;
  }
  var reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = function(e) {
   var image = new Image() // img （ DOM )
   image.src = e.target.result
   image.onload = function () {
    var canvas = document.createElement('canvas'),
     context = canvas.getContext('2d'),
     imageWidth = image.width / 5.5, // 
     imageHeight = image.height / 5.5;
    canvas.width = imageWidth;
    canvas.height = imageHeight;
    context.drawImage(image, 0, 0, imageWidth, imageHeight);

    var data = {
     base64: canvas.toDataURL('image/jpeg')
    }
    mui.ajax({
     url: "/file/uploadBase64",
     type: "POST",
     async: false,
     cache: false,
     processData: false,//  
     headers: {
      'Content-Type': 'application/json'
     },
     data: JSON.stringify(data),
     success: function(res){
      console.log(res)
      if (res.code==100){
       fileArr.push(res.data);
       // ， 
       $uploaderFiles.append($(tmpl.replace('#url#', canvas.toDataURL('image/jpeg'))));
      }else {
       weui.toast(" ， ", "forbidden");
      }
     },
     error:function () {
      weui.toast(" ， ", "forbidden");
     }
    });
   }
  }
 }
 checkPhotoSize();
});
// 5 
function checkPhotoSize(){
 if(fileArr.length>4){
  $(".weui-uploader__input-box").hide();
 }else{
  $(".weui-uploader__input-box").show();
 }
}
var index; // 
$uploaderFiles.on("click", "li", function() {
 index = $(this).index();
 $galleryImg.attr("style", this.getAttribute("style"));
 $gallery.fadeIn(100);
});
$gallery.on("click", function() {
 $gallery.fadeOut(100);
});
//   。
$(".weui-gallery__del").click(function() {
 console.log(' '+index);
 $uploaderFiles.find("li").eq(index).remove();
 fileArr.splice(index,1);
 checkPhotoSize();
});
여기에는 몇 가지 주의해야 할 점이 있다
1. 여러 개의 이미지 업로드를 실현하기 위해 몇 개의 UI 프레임워크를 비교했을 때 weui 스타일이 가장 잘 만들어진 것 같다
2. 그림의 크기를 고려하여 처음에 제가 사용한 것은 그림 파일을 수조의 형식으로 포스트를 백엔드에 주고 백엔드에서 MultipartFile 수조를 사용하여 수신하는 것입니다. 그러나 이로 인해 문제가 생겼습니다. 현재 핸드폰에서 사진을 찍는 그림은 모두 비교적 크고 임의로 3-5M의 그림이 있습니다. 만약에 백엔드에 직접post를 주면 사용자 체험이 좋지 않습니다(속도가 너무 느립니다).또한 서버에 너무 많은 자원(대역폭과 저장 공간)을 차지하기 때문에 반드시 앞부분을 먼저 압축한 후에 업로드해야 한다
3. 전단 압축은 현재 제3자 도구 인터페이스(아리 또는 칠우운단 인터페이스)를 사용하는 것을 생각할 수 있다.프런트엔드 페이지는 canvas를 이용하여base64 인코딩을 한 후에 백엔드에 보내는 것이 분명히 후자를 사용하는 것이 비교적 적합하다
마지막으로 canvas를 이용하여 그림을 base64 인코딩하여 압축하면 3-5M의 그림 그림을 100k로 압축할 수 있습니다. 현재 실현된 것은 그림을 올릴 때마다 서버에 저장하고 그림을 삭제하면 서버에 있는 그림을 동기적으로 삭제할 수 없습니다. 그러나 이 문제는 크지 않습니다. 수정이 필요하면 이 업로드 서버의 요청을 제출표를 클릭할 때 사진을 업로드하면 됩니다.
마지막으로 백엔드 수신 코드를 붙여주세요.

 /**
  *  ,base64 
  * @param map
  * @param model
  * @return
  */
 @PostMapping(value = "uploadBase64")
 @ResponseBody
 public Map<String, Object> uploadBase64Image(@RequestBody Map<String, Object> map) throws ParseException, IOException {
  Map<String, Object> imageMap = new HashMap<>();
  String base64 = map.get("base64").toString();
  MultipartFile file = BASE64DecodedMultipartFile.base64ToMultipart(base64);
  // 
  String fileSavePath = globalConfService.getByKey(StaticConfigUtil.FILE_SAVE_PATH).getConfValue();
  String fileServerPath = globalConfService.getByKey(StaticConfigUtil.FILE_SERVER_PATH).getConfValue();
  fileSavePath = fileSavePath + DateUtil.formatDatetime("yyyy-MM-dd");
  fileServerPath = fileServerPath + DateUtil.formatDatetime("yyyy-MM-dd");
  if (!file.isEmpty()) {

   String fileName = file.getOriginalFilename();
   String ext=fileName.substring(fileName.lastIndexOf(".")+1);

   String imgName = "/"+UUID.randomUUID()+ "." +ext;

   InputStream in = null;
   OutputStream out = null;
   try {
    File serverFile = new File(fileSavePath+imgName);
    // 
    if(!serverFile.getParentFile().exists()){
     serverFile.getParentFile().mkdir();
    }
    if (!serverFile.exists()) {
     serverFile.createNewFile();
    }
    in = file.getInputStream();
    out = new FileOutputStream(serverFile);
    byte[] b = new byte[1024];
    int len = 0;
    while ((len = in.read(b))!=-1) {
     out.write(b, 0, len);
    }
    out.close();
    in.close();
    String serverPath = fileServerPath + imgName;
    return ResultUtil.successJson(serverPath);
   } catch (Exception e) {
    e.printStackTrace();
    return ResultUtil.errorJson(ErrorEnum.E_40001,e.getMessage());
   } finally {
    if (out != null) {
     out.close();
     out = null;
    }
    if (in != null) {
     in.close();
     in = null;
    }
   }
  } else {
   return ResultUtil.errorJson(ErrorEnum.E_90007);
  }
 }
/**
 * base64 MultipartFile 
 *
 * @param base64
 * @return
 */
public static MultipartFile base64ToMultipart(String base64) {
 try {
  String[] baseStrs = base64.split(",");

  BASE64Decoder decoder = new BASE64Decoder();
  byte[] b = new byte[0];
  b = decoder.decodeBuffer(baseStrs[1]);

  for (int i = 0; i < b.length; ++i) {
   if (b[i] < 0) {
    b[i] += 256;
   }
  }

  return new BASE64DecodedMultipartFile(b, baseStrs[0]);
 } catch (IOException e) {
  e.printStackTrace();
  return null;
 }
}
총결산
이 글은weui가 여러 개의 그림을 올리고, 압축하고, base64 인코딩의 예시 코드에 관한 글을 소개합니다. 더 많은 관련 Weui가 여러 개의 그림을 압축해서 올리는 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
Java 프로그램과 C 언어의 차이에 대한 간단한 분석
Sorting 정렬

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage