* @returns {Promise} resolved promise 返回压缩后的新图片
*/
function compressImage(file) {
return new Promise((resolve, reject) => {
// 获取图片（加载图片是为了获取图片的宽高）
const img = new Image();
img.src = window.URL.createObjectURL(file);
img.onerror = error => reject(error);
img.onload = () => {
// 画布宽高
const canvasWidth = document.documentElement.clientWidth * window.devicePixelRatio;
const canvasHeight = document.documentElement.clientHeight * window.devicePixelRatio;
// 计算缩放因子
// 这里我取水平和垂直方向缩放因子较大的作为缩放因子，这样可以保证图片内容全部可见
const scaleX = canvasWidth / img.width;
const scaleY = canvasHeight / img.height;
const scale = Math.min(scaleX, scaleY);
// 将原始图片按缩放因子缩放后，绘制到画布上
const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const imageWidth = img.width * scale;
const imageHeight = img.height * scale;
const dx = (canvasWidth - imageWidth) / 2;
const dy = (canvasHeight - imageHeight) / 2;
ctx.drawImage(img, dx, dy, imageWidth, imageHeight);
// 导出新图片
// 指定图片 MIME 类型为 'image/jpeg', 通过 quality 控制导出的图片质量，进行实现图片的压缩
const quality = 0.92
canvas.toBlob(file => resolve(tempFile), "image/jpeg", quality);
};
});
},
图片上传
通过 FormData 创建表单数据，发起 ajax POST 请求即可，下面函数实现了上传文件。
注意：发送 FormData 数据时，浏览器会自动设置 Content-Type 为合适的值，无需再设置 Content-Type ，否则反而会报错，因为 HTTP 请求体分隔符 boundary 是浏览器生成的，无法手动设置。
/**
* 上传文件
* @param {File} file 待上传文件
* @returns {Promise} 上传成功返回 resolved promise，否则返回 rejected promise
*/
function uploadFile (file) {
return new Promise((resolve, reject) => {
// 准备表单数据
const formData = new FormData()
formData.append('file', file)
// 提交请求
const xhr = new XMLHttpRequest()
xhr.open('POST', uploadUrl)
xhr.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
resolve(JSON.parse(this.responseText))
} else {
reject(this.responseText)
}
}
xhr.send(formData)
})
}
小结
有了上面这些辅助函数，处理起来就简单多了，最终调用代码如下：
function onFileChange (event) {
const files = Array.prototype.slice.call(event.target.files)
