Question

我尝试从剪贴板复制和粘贴图片，但是我在Chrome中收到此错误消息。有什么问题？

错误

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);
    });        
});

Answer 1

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

Blob或 B inary L arge OB ject是一个冗长的字符串，它是您的对象，但它不是文件，而是只是一个字符串。

通过尝试从剪贴板中复制，该剪贴板具有文件目录的副本，至少从错误的方式和代码的方式来看，它的外观是什么，它不是＆＃39; ta blob文件类型，因此Chrome不会设置为处理实际文件。

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

然后，您可以遍历它并执行您需要做的事情。

如果你愿意，我会发布一些代码来自我做过的另一个项目，所以请问你是否需要它。

只有在您使用MySQL服务器时它才会起作用;代码是用PHP编写的。

Blob Wiki Article

复制并粘贴剪贴板中的图像，blob错误

1 个答案: