클립 보드에서 이미지 복사 및 붙여 넣기, blob 오류

Question

클립 보드에서 이미지를 복사하여 붙여 넣으려고하는데 크롬에서이 오류 메시지가 나타납니다. 뭐가 잘못 되었 니?

js fiddle

오류

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, 또는 B inary L ARGE OB ject는 개체, 대신 파일 인이다 긴 문자열, 그냥 문자열입니다.

파일의 디렉토리 복사본이있는 클립 보드에서 오류가 발생한 방법과 코드가 어떻게 생겼는지에 따라 복사하는 것이 BLOB 파일 형식이 아닙니다 , Chrome은 실제 파일을 처리하도록 설정되지 않습니다.

이것이 무엇인지 모르겠지만 데이터베이스에 파일을 저장하려는 경우 이미지를 양식을 통해 업로드 한 다음 고유 한 이름을 지정하고 각 이미지의 위치, 실제 경로를 데이터베이스에 저장하십시오.

그런 다음 루프를 반복하고 수행해야 할 작업을 수행 할 수 있습니다.

원하는 경우 다른 프로젝트에서 내가 작성한 일부 코드를 게시합니다.이 코드는 원하는지 물어 봅니다.

MySQL 서버를 사용하는 경우에만 작동합니다. 코드는 PHP로 작성되었습니다.

Blob Wiki Article