从剪贴板复制和粘贴图像，blob错误

Copy and paste images from clipboard, blob Error

本文关键字：图像 blob 错误 剪贴板 复制      更新时间：2023-09-26

我试图从剪贴板复制和粘贴图像，但在chrome中收到了此错误消息。怎么了？

js小提琴

错误

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': The argument is not a Blob.

JS-

 $(function() {
$("body").bind("paste", function(ev) {
    var $this = $(this);
    var original =  ev.originalEvent;
    var file =  original.clipboardData.items[0].getAsFile();
    var reader = new FileReader();
    reader.onload = function (evt) {
        var result = evt.target.result; 
        var arr = result.split(",");
        var data = arr[1]; // raw base64
        var contentType = arr[0].split(";")[0].split(":")[1];
        // this needs to post to a server route that can accept raw base64 content and save to a file            
        $.post("/echo/html/", {
            contentType: contentType,
            data: data
        });                                
        $this.append("<img src='" + result + "' />");
    };
    reader.readAsDataURL(file);
    });        
});

问题是，当浏览器试图通过剪贴板加载文件时，它正在寻找blob类型的数据。

Blob或BinaryLargeOB对象是一个很长的字符串，它是您的对象，但它不是一个文件，而是一个字符串。

通过尝试从剪贴板进行复制，剪贴板中有文件目录的副本，至少从错误的原因和代码的情况来看，这就是它的样子，它不是blob文件类型，因此Chrome无法处理实际的文件。

我不知道这是为了什么，但如果你试图将文件保存在数据库中，那么你应该做的是通过表单上传图像，将它们放在一个具有唯一名称的目录中，并将每个图像的位置，即实际路径存储在数据库中。

然后，你可以循环通过它并做你需要做的事情

如果你愿意的话，我发布了一些我从另一个项目中得到的代码，所以只要问你是否想要它。

只有当你使用MySQL服务器tho时，它才会起作用；代码是用PHP编写的。

Blob Wiki文章

相关文章：