一.input type=file与文件上传
复制代码
如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢
enctype="multipart/form-data"复制代码
enctype属性规定在发送到服务器之前应该如何对表单数据进行编码,默认的编码是:”application/x-www-form-urlencoded“。对于普通数据是挺适用的,但是,对于文件,科科,就不能乱编码了,该什么就是什么,只能使用multipart/form-data作为enctype属性值。
只上传文件夹而不是文件
复制代码
UI自定义
复制代码
accept属性(用来指定浏览器接受的文件类型)
//只允许传图片 //只允许传图片``` accept属性是MIME类型: 复制代码
accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2" ``` 多个属性值使用逗号分隔:
复制代码
二.图片上传/压缩/水印/方向问题
:该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState
会变成已完成(DONE),并触发 loadend
事件,同时 result
属性将包含一个data:URL
格式的字符串(base64编码)以表示所读取文件的内容。
返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi
//语法:canvas.toDataURL(type, encoderOptions); //type(可选):图片格式,默认为 image/png; //encoderOptions(可选) :在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。//返回值:包含 data URI 的DOMString。 复制代码
2.1图片上传
//html//水印小照片 //合成后的照片 //js var eleUploadFile = document.getElementById('uploadFile'); var compounded = document.getElementById('compounded');eleUploadFile.addEventListener('change', function (event) { var file = event.target.files[0]; //获取图片资源 if (!event.type.match('image.*')) {// 只选择图片文件 return false; } var reader = new FileReader(); reader.readAsDataURL(file); // 读取文件 exif(file); //旋转图片 reader.onloadend=function(e){ //文件读取结束 var base64 = e.target.result; if (base64.length > 1024 * 50) { console.error('图片尺寸请小于50K'); return; } var compressImg = compress(base64); //压缩函数 var compoundImg = compoundImg(base64,function(url){ var size = 180 / (window.devicePixelRatio || 1); compounded.innerHTML = ''; }) } })复制代码
function compress(readerResult) { //readerResult-->传入文件base64结果 var img = new Image(); img.src = readerResult; if(readerResult.length<80000) { return readerResult ;//小于80K的不压缩 } //用于压缩图片的canvas let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); //画图区域 canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; //铺底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight); //进行最小压缩 var dataURL = canvas.toDataURL("image/jpeg",0.9); return dataURL; }复制代码
function compoundImg(url,callback) { //url -->合成水印较大的那张图的base64码 var eleImgCover = document.getElementById('imgCover'); var canvas = document.createElement('canvas'); var size = 180; //水印大小 canvas.width = size; canvas.height = size; var context = canvas.getContext('2d'); // 这是上传图像 var imgUpload = new Image(); imgUpload.onload = function () { // 绘制 context.drawImage(imgUpload, 0, 0, size, size, 0,0, size, size); // 再次绘制(绘制上水印小照片) context.drawImage(eleImgCover, 0, 0, size, size, 0,0, size, size); // 回调 callback(canvas.toDataURL('image/png')); }; imgUpload.src = url; } 复制代码
2.4 处理图片方向信息
//先引入EXIF.js function exif(file) { var Orientation = ''; EXIF.getData(file, function() { console.log(EXIF.pretty(this)); EXIF.getAllTags(this); console.log(EXIF.getTag(this, 'Orientation')); Orientation = EXIF.getTag(this, 'Orientation'); //return; }); if (navigator.userAgent.match(/iphone/i)) { //如果方向角不为1,都需要进行旋转 if(Orientation != "" && Orientation != 1){ switch(Orientation){ case 6://需要顺时针(向左)90度旋转 console.log('需要顺时针(向左)90度旋转'); break; case 8://需要逆时针(向右)90度旋转 console.log('需要顺时针(向右)90度旋转'); break; case 3://需要180度旋转 alert('需要180度旋转'); console.log('需要180度旋转'); break; } } } } 复制代码
2.5 合成图片
function html2canvas(node) { // node为要合成图片的dom节点 const weNeedImageUrl = '' const scale = window.devicePixelRatio // 防止在高倍屏下合成图片过于模糊 const createCanvas = document.createElement('canvas') createCanvas.width = node.offsetWidth * scale createCanvas.height = node.offsetHeight * scale const ctx = createCanvas.getContext('2d') ctx.scale(scale, scale) html2canvas(node, { scale: scale, dpi: 384, canvas: createCanvas, width: node.offsetWidth, height: node.offsetHeight }).then((canvas) => { // 合成图片后的base64码 let domToImgUrl = canvas.toDataURL('image/jpeg', 0.92) console.log('合成图片大小:', domToImgUrl.length) // 下面是将图片的base64以blob形式上传到阿里云文件服务器,获取图片地址 let domImageArr = domToImgUrl.split(',') let mime = domImageArr[0].match(/:(.*?);/)[1] // 获取图像类型 let decodeData = atob(domImageArr[1]) // 解码base64 let decodeDataLength = decodeData.length let uInt8array = new Uint8Array(decodeDataLength) //Uint8Array类型数组表示的8位无符号整数数组。内容被初始化为0 while (decodeDataLength--) { uInt8array[decodeDataLength] = decodeData.charCodeAt(decodeDataLength) } let blob = new Blob([uInt8array], { type: mime }) let formData = new FormData() formData.append('file', blob, 'image.png') // 上传该图片到阿里云 appUploadFile(formData).then(data => { weNeedImageUrl = data.data[0] return weNeedImageUrl }) }) }复制代码