2. 参数文档

参数

lrz(file, [options]);

• file 通过 input:file 得到的文件，或者直接传入图片路径

• [options] 这个参数允许忽略

  • width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
  • height {Number} 同上
  • quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7
  • fieldName {String} 后端接收的字段名，默认：file

返回结果

返回值是一个promise对象

• then(rst)

  • rst.formData 后端可处理的数据
  • rst.file 压缩后的file对象（默认已经丢在rst.formData有一份了），需要注意的是如果压缩率太低的话，这个会是原始的file对象
  • rst.fileLen 生成后的图片的大小，后端可以通过此值来校验是否传输完整
  • rst.base64 生成后的图片base64，后端可以处理此字符串为图片，也直接用于img.src = base64
  • rst.base64Len 生成后的base64的大小，后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)
  • rst.origin 也就是原始的file对象，里面存了一些原始文件的信息，例如大小，日期等。

• catch(err)

• always()

一个例子

document.querySelector('input').addEventListener('change', function () {
    // this.files[0] 是用户选择的文件
    lrz(this.files[0], {width: 1024})
        .then(function (rst) {
            // 把处理的好的图片给用户看看呗

            var img = new Image();
            img.src = rst.base64;

            img.onload = function () {
                document.body.appendChild(img);
            };

            return rst;
        })

        .then(function (rst) {
            // 这里该上传给后端啦

            /* ==================================================== */
            // 原生ajax上传代码，所以看起来特别多 ╮(╯_╰)╭，但绝对能用
            // 其他框架，例如jQuery处理formData略有不同，请自行google，baidu。
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:5000/');

            xhr.onload = function () {
                if (xhr.status === 200) {
                    // 上传成功
                } else {
                    // 处理其他情况
                }
            };

            xhr.onerror = function () {
                // 处理错误
            };

            xhr.upload.onprogress = function (e) {
                // 上传进度
                var percentComplete = ((e.loaded / e.total) || 0) * 100;
            };

            // 添加参数
            rst.formData.append('fileLen', rst.fileLen);
            rst.formData.append('xxx', '我是其他参数');

            // 触发上传
            xhr.send(rst.formData);
            /* ==================================================== */

            return rst;
        })

        .catch(function (err) {
            // 万一出错了，这里可以捕捉到错误信息
            // 而且以上的then都不会执行

            alert(err);
        })

        .always(function () {
            // 不管是成功失败，这里都会执行
        });
});

JQuery 处理

例子中给的是原生ajax的方式，下面是JQuery上传的方式

注意！！：使用 zepto 的朋友请用 原生 或 jquery代替，在某些 android 设备下用 zepto 会出现不发送 Content-Type 导致无法上传的BUG。 感谢 @Poised_flw

// 额外添加参数
rst.formData.append('fileLen', rst.fileLen);
 
$.ajax({
    url: 'http://koa-upload.coding.io', // 这个地址做了跨域处理，可以用于实际调试
    data: rst.formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function (data) {
        alert(JSON.stringify(data));
    }
});

其他

演示地址