前面文章使用Tableau REST API取得缩略图1:取得缩略图里面有个blobToDataURI的JS函数,这个用于Blob数据转base64,代码如下:

//Blob数据转base64
function blobToDataURI(blob, callback) {
    var reader = new FileReader();
    reader.onload = function (e) {
        callback(e.target.result);
    }
    reader.readAsDataURL(blob);
}

现在图片有了,因为是数据流形式的图片,提交它到服务器,我们需要处理一下,使用

formData.append(name, value, filename);

来模拟一个文件数据对象:

var formData = new FormData();
formData.append("reportPreviewImage",dataURItoBlob($("#reportPreview").attr("src")),$("#reportImage").val());
//这里再加入其它的form信息
//.............
$.ajax({
        type: "POST",
        url: '/report/addnew',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (json) {
            //.............
        }
});	

这里面又有一个JS函数dataURItoBlob用于base64数据转Blob:

//base64数据转Blob
function dataURItoBlob(base64Data) {
	var byteString;
	if (base64Data.split(',')[0].indexOf('base64') >= 0)
		byteString = atob(base64Data.split(',')[1]);
	else
		byteString = unescape(base64Data.split(',')[1]);
	var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
	
	var ia = new Uint8Array(byteString.length);
	for (var i = 0; i < byteString.length; i++) {
		ia[i] = byteString.charCodeAt(i);
	}
	return new Blob([ia], {type:mimeString});
}

这样,一个缩略图就自动拉下来然后提交或者无残留取消提交了。

Logo

永洪科技,致力于打造全球领先的数据技术厂商,具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐