wangEditor在IE中截图上传问题（二）

最新推荐文章于 2021-09-14 14:38:04 发布

兜兜风~

最新推荐文章于 2021-09-14 14:38:04 发布

阅读量1.1k

点赞数

分类专栏：富文本

本文链接：https://blog.csdn.net/FannyIf123/article/details/106059726

版权

富文本专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上一篇文章：wangEditor在IE中截图上传问题（一）

截取之后考虑将base64转换成二进制文件

转载参考：《利用FileReader和FormData实现图片预览和上传(base64转二进制文件)》

根据参考文献，我发现它是将base64存储到blob里，不了解blog的话，我可以先科普一下下

blog是二进制大对象，是一个存储二进制文件的大容器引用
详细请看：JavaScript 之 Blob 对象类型

第四个问题

function dataURItoBlob(dataURI) {
                   

	var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    alert(dataURI);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
        // alert(ia[i])
    }
    return new Blob([ab], {type: mimeString});
}
var fd = new FormData();
var blob = dataURItoBlob(dataURI);
fd.append('myFileName', blob);
$.ajax({
    type: 'POST',
    url: '/uploadImg',//自己代码中的接口
    data: fd,
    processData: false, // 不会将 data 参数序列化字符串
    contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log('进度', percentComplete);
            }
        }, false);

但是控制台报错
在这里插入图片描述
这时我们需要更改一下

$.ajax替换成jQuery.ajax

在这里插入图片描述
第五个问题

这是正常插入的图片
在这里插入图片描述
mysql:

现在我们转换完之后，截图粘贴后台是这样

mysql:

你会发现虽然后台输出显示已经转换成二进制了，但是数据库并没有像正常插入的图片那样把“/upload/1589198863302114.png”存储进去，这是why???

查看代码后发现：

在这里插入图片描述
所以我们只改了上面的div内的img，下面的textarea 并没有变化，我们下一步还要找到哪个地方是输出修改textarea内的img的地方。

第六个问题

当我转换完一个图片时，又想到了如果粘贴多张图片时，是不是也会转化。
在这里插入图片描述

看来转化只转化了1个，我们还要做循环处理。
目前没有说明，后期在（三）里补充。详情请看：wangEditor在IE中截图上传问题（三）
目前比较大的明显的问题我做了一下标记，其中小的问题就没有记录啦，现在解决IE截图的问题还在继续，暂时由于其他事情，先暂缓，如果有哪位大佬看到啦有好的解决方案，希望在评论区留言，万分感谢，同时我的方法有哪些问题可以留言告知，本人必定会虚心请教学习。后期解决后会在wangEditor在IE中截图上传问题（三）中记录。