本地图片上传
今天做的活动有需求是需要上传图片，我这边使用了vant的组件，然后在网上搜了下剪切压缩的部分逻辑，基本流程算是跑通了。
其实之前只是知道<input tyle=file>这样子可以上传图片，其实这里是可以有好几个属性的
懒得打字了，把我自己的demo贴出来当做笔记吧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>file文件上传</title> </head> <body> <input class="ipt" type="file" accept="image/*" multiple> <!-- 这里面直接写笔记会比较好， input type=file时，其实还有四个属性，具体可以去mdn上看看（https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file） 1，accept 接受的文件类型 2,files 就是上传了文件之后需要从这个属性里面去读取 3,multiple 多选 4,capture =>没用过，大概是可以控制哪个摄像头 其实下面js里面有有些files里面的内容 通过files里面的内容还不行 还需要借助FileReader这个构造函数 他有四种方法，分别用来返回不同类型的数据，比如base64啦，用的比较多的就是base64了。 然后裁剪压缩的话，就是canvas了 需要注意的是，一般压缩的话是借用了canvas.toDataURL(type,rate) 需要两个参数，前面是类型，后面是压缩率，默认是0.92 经过测试，发现type='image/jpeg'这样子是能够压缩的，其他的参数好像都不太行，我自己设置为0.7，压缩效果都是很好了。 --> <script> var ipt= document.querySelector(".ipt"); ipt.onchange=function (e){ console.log(e); console.log(this); console.log(this.files); var img = document.createElement("img"); img.src = window.URL.createObjectURL(this.files[0]); let file1=this.files[0]; img.onload=function(){ document.body.appendChild(img); var canvas=document.createElement('canvas'); var ctx=canvas.getContext('2d'); canvas.width=200; canvas.height=200/img.width*img.height; ctx.drawImage(img,0,0,200,200/img.width*img.height) let res = canvas.toDataURL('image/jpeg',0.1); // console.log(res); console.log(res.length); } var oFileReader=new FileReader(); // oFileReader.readAsDataURL(file1); // oFileReader.readAsArrayBuffer(file1); oFileReader.readAsBinaryString(file1); // oFileReader.onload=function (e){ // console.log(e.target.result); // } oFileReader.onload=function (e){ console.log(e); // console.log(e.target.result); } } </script> </body> </html>
