Vue.js 图片剪裁上传组件 vue-image-crop-u

Demo：https://dai-siki.github.io/vue-image-crop-upload/example/demo.html

参考地址：https://github.com/dai-siki/vue-image-crop-upload

注意：该组件适用于 PC 端，不推荐手机端使用。

源代码核心实现：

// 上传图片
upload() {
    let that = this,
        {
            lang,
            imgFormat,
            mime,
            url,
            params,
            headers,
            field,
            ki,
            createImgUrl
        } = this,
        fmData = new FormData();
    fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat);

    // 添加其他参数
    if (typeof params == 'object' && params) {
        Object.keys(params).forEach((k) => {
            fmData.append(k, params[k]);
        })
    }

    // 监听进度回调
    const uploadProgress = function(event) {
        if (event.lengthComputable) {
            that.progress = 100 * Math.round(event.loaded) / event.total;
        }
    };

    // 上传文件
    that.reset();
    that.loading = 1;
    that.setStep(3);
    new Promise(function(resolve, reject) {
        let client = new XMLHttpRequest();
        client.open('POST', url, true);
        client.onreadystatechange = function() {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status === 200 || this.status === 201) {
                resolve(JSON.parse(this.responseText));
            } else {
                reject(this.status);
            }
        };
        client.upload.addEventListener("progress", uploadProgress, false); //监听进度
        // 设置header
        if (typeof headers == 'object' && headers) {
            Object.keys(headers).forEach((k) => {
                client.setRequestHeader(k, headers[k]);
            })
        }
        client.send(fmData);
    }).then(
        // 上传成功
        function(resData) {
            if (that.value) {
                that.loading = 2;
                that.$emit('crop-upload-success', resData, field, ki);
            }

        },
        // 上传失败
        function(sts) {
            if (that.value) {
                that.loading = 3;
                that.hasError = true;
                that.errorMsg = lang.fail;
                that.$emit('crop-upload-fail', sts, field, ki);
            }
        }
    );
}

/**
 * database64文件格式转换为2进制
 *
 * @param  {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
 * @param  {[String]} mime [description]
 * @return {[blob]}      [description]
 */
export default function(data, mime) {
    data = data.split(',')[1];
    data = window.atob(data);
    var ia = new Uint8Array(data.length);
    for (var i = 0; i < data.length; i++) {
        ia[i] = data.charCodeAt(i);
    };
    // canvas.toDataURL 返回的默认格式就是 image/png
    return new Blob([ia], {
        type: mime
    });
};