博客

用jq的ajax对接图片验证码接口时，怎么处理返回的blob数据流并渲染到img标签上呢

方法如下：

处理blob数据流方法有两种：

1、  设置

xhrFields: { responseType: ‘blob’ }

2、  或设置

contentType: false,

xhr: function () {


var xhr = new XMLHttpRequest()

xhr.responseType = ‘blob’

return xhr

}

$(function () {
    //图片验证码接口
    myAjax('/act/image-code', {
        _platform_: 'act_ios',
        userAccount: '13632300000'
    }, function (res) {
        let url = window.URL || window.webkitURL
        let codeImgUrl = url.createObjectURL(res)
        $('img').attr("src", codeImgUrl);
    })


    /**
     * 请求公共配置 ============================
     * @param {string} url 接口请求地址
     * @param {object} option 提交的参数
     * @param {function} callback 响应回调
     */

    function myAjax(url, option, callback) {
        var formData = new FormData();

        for (var item in option) {
            formData.append(item, option[item])
        }

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            // xhrFields: {
            //     responseType: 'blob'
            // },
            contentType: false,
            xhr: function () {
                var xhr = new XMLHttpRequest()
                xhr.responseType = 'blob'
                return xhr
            },
            success: function success(res) {
                callback && callback(res);
            },
            error: function error(err) {
                console.log('接口错误')
            }
        });

    }
});