• 若依单文件上传及跳转页面(将base64Url转换为blob格式)


    java:

    1. /**
    2. * 通用上传请求(单个)
    3. */
    4. @PostMapping("/upload")
    5. @ResponseBody
    6. public AjaxResult uploadFile(MultipartFile file) throws Exception
    7. {
    8. System.out.println("jls");
    9. try
    10. {
    11. // 上传文件路径
    12. String filePath = RuoYiConfig.getUploadPath();
    13. // 上传并返回新文件名称
    14. String fileName = FileUploadUtils.upload(filePath, file);
    15. String url = serverConfig.getUrl() + fileName;
    16. AjaxResult ajax = AjaxResult.success();
    17. ajax.put("url", url);
    18. ajax.put("fileName", fileName);
    19. ajax.put("newFileName", FileUtils.getName(fileName));
    20. ajax.put("originalFilename", file.getOriginalFilename());
    21. return ajax;
    22. }
    23. catch (Exception e)
    24. {
    25. return AjaxResult.error(e.getMessage());
    26. }
    27. }

     

    html:

    1. $("#sureCut").on("click", function () {
    2. cas = $('#tailoringImg').cropper('getCroppedCanvas'); //获取被裁剪后的canvas
    3. base64url = cas.toDataURL('image/png'); //转换为base64地址形式
    4. base64url = base64url.replace("\r", "");
    5. $("#preimg").attr("src", base64url);
    6. //关闭裁剪框
    7. closeTailor();
    8. });
    9. //关闭裁剪框
    10. function closeTailor() {
    11. var data = new FormData();
    12. //dataURLtoBlob(base64url )将base64格式转为blob格式
    13. data.append("file",dataURLtoBlob(base64url ));
    14. console.log(data)
    15. $.ajax({
    16. type: "POST",
    17. url: "/common/upload",
    18. data: data,
    19. async: false,
    20. cache: false,
    21. contentType: false,
    22. processData: false,
    23. dataType: 'json',
    24. success: function (result) {
    25. if (result.code == 0) {
    26. console.log(result);
    27. alert("上传成功")
    28. window.location.href = "/jieHong?url=" + result.url;
    29. } else {
    30. alert(result.msg);
    31. }
    32. },
    33. });
    34. }
    35. //将base64Url转换为blob格式
    36. function dataURLtoBlob(dataUrl) {
    37. var arr = dataUrl.split(',');
    38. mime = arr[0].match(/:(.*?);/)[1];
    39. bstr = atob(arr[1]);
    40. n = bstr.length;
    41. u8arr = new Uint8Array(n);
    42. while (n--) {
    43. u8arr[n] = bstr.charCodeAt(n);
    44. }
    45. return new Blob([u8arr], {type: mime});
    46. }

  • 相关阅读:
    Flutter在web项目中使用iframe
    如何在three.js中画3D圆弧及半圆弧组成圆
    InterSystems IRIS使用python pyodbc连接 windows环境,odbc驱动安装,DSN配置,数据源配置
    bf16 和fp16 ,fp32的区别以及相互转换逻辑
    js阻止浏览器返回上一页
    图解 | 聊聊 MyBatis 缓存
    人脸匹配——OpenCV
    2022华为杯研究生数学建模赛题思路分析
    VS2017+OpenCV4.5.5 K近邻算法-评价纸巾的好坏
    聚类-Kmeans算法(图解算法原理)
  • 原文地址:https://blog.csdn.net/m0_60164821/article/details/126348642