一.input type=file与文件上传
type="file">
复制代码如果想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢
enctype="multipart/form-data"
复制代码enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencoded“。对于普通数据是挺适用的，但是，对于文件，科科，就不能乱编码了，该什么就是什么，只能使用multipart/form-data作为enctype属性值。
只上传文件夹而不是文件
type="file" webkitdirectory directory multiple/>
复制代码UI自定义
复制代码accept属性(用来指定浏览器接受的文件类型)
type="file" accept="image/*" > //只允许传图片 type="file" accept="image/png,image/jpeg,image/gif,image/jpg"> //只允许传图片
``` accept属性是MIME类型：
复制代码accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2" ``` 多个属性值使用逗号分隔：
"audio/*,video/*,image/*">
复制代码二.图片上传/压缩/水印/方向问题
1.FileReader.readAsDataURL()：该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
2.HTMLCanvasElement.toDataURL()返回一个包含图片展示的 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
![]()
"imgCover" src="./watermark.png" class="clip"> //水印小照片
"compounded">
//合成后的照片
//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 = '
'" width="'+ size +'" height="'+ size +'">';
})
}
})
复制代码2.2图片压缩
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;
}
复制代码2.3图片水印
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 处理图片方向信息
//先引入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 html2canvas合成图片
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
})
})
}
复制代码