Question

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

我正在使用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);

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

＆＃13;

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

＆＃13;

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

＆＃13;

从剪贴板发送文件

1 个答案: