• canvas等base64格式上传到服务端直传到oss


    一般来说,我们用画布,html2canvas这些获取的都为base64格式的

    html2canvas(document.body, {
      onrendered: function (canvas) {
      console.log('。。。。。。', canvas.toDataURL("image/png"));
      },
    });
    但是上传到oss是不可以直接上传base64的,需要把base64转换成blob,然后把blob转换成file文件的形式
    我们在之前拿到了base64文件,现在把他转换成blob形式的:
    var _fileBlob = dataURLtoBlob(base);
    function dataURLtoBlob(dataurl) {
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    }
    最后把blob转换成file文件形式:
    let fileOfBlob = new File([_fileBlob], new Date() + '.jpg');
    //这里默认上传为jpg格式的
    即可把这个ileOfBlob加到var request = new FormData();这里来:
    request.append('file', fileOfBlob);
     
    值得注意的是,好像oss上传有顺序规则
    1.request.append('name', 'Picture_G_Balloon.jpg');
    2.request.append('key', random_name);
    3.request.append("policy", data.policy);//policy规定了请求的表单域的合法性
    4.request.append("OSSAccessKeyId", data.ossaccessKeyId);//Bucket 拥有者的Access Key Id。
    5.request.append("success_action_status", '200');// 让服务端返回200,不然,默认会返回204
    6.request.append("Signature", data.signature);//根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
    7request.append('file', fileOfBlob);
    貌似要这样的顺序,不然会报错,很奇怪,不知道是不是后台上传的设置。。。
  • 相关阅读:
    DBA-常用到的动态视图分析语句
    SQL Server 复制(Replication) ——事务复制搭建
    SQL Server 不同网段IP通过名称访问
    [javaEE] HTTP协议总结
    [android] 从gallery获取图片
    [android] 加载大图片到内存
    [javaEE] web应用的目录结构&配置虚拟主机
    [android] 代码注册广播接收者&利用广播调用服务的方法
    [android] 采用aidl绑定远程服务
    [Linux] Linux的环境变量
  • 原文地址:https://www.cnblogs.com/ssszjh/p/11322173.html
Copyright © 2020-2023  润新知