从剪贴板发送文件

Question

我希望能够将通过打印屏幕按钮拍摄的图像粘贴到文本区域并将其上传到我的服务器。

我正在使用onpaste，它似乎可以工作，我可以获得一个文件对象，但每当我尝试发送它时它都是空的。

onpaste(event) {
  if (event.clipboardData.files.length) {
    let file = event.clipboardData.files[0];

    var oReq = new XMLHttpRequest();
    var data = new FormData();

    data.append("file", file);
    data.append("csrf", CSRF_TOKEN);

    oReq.open("POST", exports.url("/file"));
    oReq.setRequestHeader("Accept", "application/json");

    oReq.send(data);
  }
}

我在我的开发工具中观察到网络选项卡，并且正在正确发送一个请求，其中包含有关文件的所有信息，但没有内容

请求负载：

------WebKitFormBoundaryWggS2BbKcZV6v4tn
Content-Disposition: form-data; name="file"; filename="image.png"
Content-Type: image/png


------WebKitFormBoundaryWggS2BbKcZV6v4tn
Content-Disposition: form-data; name="csrf"

58718518696317230756900774635415
------WebKitFormBoundaryWggS2BbKcZV6v4tn--

Answer 1

在这种情况下，您通过event.clipboardData.files[0]; 访问的文件实际上只是文件的句柄，它不包含实际的文件数据。要访问它，您必须根据FileAPI documentation 使用 FileReader。

有四种不同的方式可以通过 FileReader 读取这些数据：

void readAsArrayBuffer(Blob blob);
void readAsBinaryString(Blob blob);
void readAsText(Blob blob, optional DOMString label);
void readAsDataURL(Blob blob);

请参阅下面的示例，您可以根据需要对其进行修改。

function onPaste(event) {
  if (event.clipboardData.files.length) {
    let file = event.clipboardData.files[0];
    var oReq = new XMLHttpRequest();
    var data = new FormData();

    data.append("csrf", "TOKEN");

    oReq.open("POST", "/file");
    oReq.setRequestHeader("Accept", "application/json");

    /* Create a new FileReader. */
    var fileReader = new FileReader();
    
    fileReader.onload = function(event) {
      /* Once the file has finished loading, run the following: */
      data.append("file", this.result);
      oReq.send(data);
    };
    
    /* Tell the file reader to asynchronously load the files contents. */
    fileReader.readAsDataURL(file);
  }
}

<textarea onpaste="onPaste(event)" ></textarea>