移动端File和Base64的坑

最近在做移动端的图片操作项目,会涉及到上传图片、Canvas、转换base64等操作,被坑得不能自理,不过好在都解决了~ 记录如下:

一、TypeError: FileConstructor is not a constructor

背景

这个错误是我在微信浏览器中点击上传图片按钮时发生的,具体逻辑为依次调用微信JSSDK中的wx.chooseImagewx.getLocalImgData,第二个接口会返回base64数据。

此时我们需要将base64转换为File对象,再通过FormData传给服务端来处理其他业务。所以我预先写了一个dataURL2file函数,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* 将base64转换为file对象
* @param {string} dataURL base64数据
* @param {string} filename 文件名
*/
function dataURL2file(dataURL, filename = 'custom_file') {
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);
}
filename += '.' + mime.split('/')[1]
return new File([u8arr], filename, { type: mime });
}

阅读全文

本地调试微信JSSDK

调试微信jssdk

最近在做一个h5的项目,需要用到微信jssdk的图片上传功能。踩坑记录~

一、配置

  1. 进入微信公众号,找到基本配置,获取到AppIDAppSecret,后端需要使用这两个数据生成对应的tookentiket,此处省略。然后填写好IP白名单(重要);

  2. 公众号设置 - 功能设置 - JS接口安全域名 处设置需要访问页面的域名(注:有坑,见后文),如:sair.example.com

二、调试

填好配置,接下来就是调试。微信要求前端传入的url必须为动态线上的url,且端口必须为80443,这样一来,我们在本地进行调试时就会涉及如何将本地url变成线上url的问题了。

阅读全文

script标签中的defer和async区别

script标签的位置决定了页面何时渲染,浏览器解析页面时,碰到script标签会将脚本解析完后再解析后面的html、script。

所以我们在往页面里写script标签时建议不要将script标签放在head内,而是尽量放在body之前,其他html标签之后。这样的好处是页面白屏时间会缩短,优先解析出html。

阅读全文

JavaScript开发的45个技巧

JavaScript是一个绝冠全球的编程语言,可用于Web开发、移动应用开发(PhoneGap、Appcelerator)、服务器端开发(Node.js和Wakanda)等等。JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人。能够编写结构清晰、性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人。

在这篇文章里,我将分享一些JavaScript的技巧、秘诀和最佳实践,除了少数几个外,不管是浏览器的JavaScript引擎,还是服务器端JavaScript解释器,均适用。

本文中的示例代码,通过了在Google Chrome 30最新版(V8 3.20.17.15)上的测试。

阅读全文

git命令集

查看git当前用户名

1
git config --get user.name

查看git上个人代码量

1
git log --author="$(git config --get user.name)" --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }'

阅读全文

gulp-rev版本替换插件

脚手架中运行gulp build命令时会用到版本号插件,插件使用方法如下:

实现原理

  1. 解析jscss文件;
  2. 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化);
  3. 替换html中的js,css文件名,生成一个带版本号的文件名。

阅读全文


Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2019 FE blog All Rights Reserved.

访客数 : | 访问量 :