我试图从剪贴板复制和粘贴图像,但在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文章