Javascript DataTransfer 항목이 비동기 호출을 통해 유지되지 않음

Javascript DataTransfer 항목이 비동기 호출을 통해 유지되지 않음

DataTransfer와 함께 Vuejs를 사용하여 파일을 비동기적으로 업로드하고 있으며, 여러 파일을 한 번에 드래그 앤 드롭하여 업로드할 수 있도록 하고 싶습니다.

첫 번째 업로드를 할 수 있지만 업로드가 완료될 때까지 Javascript는 가비지가 수집되거나 DataTransfer 아이템 오브젝트가 변경되었습니다.

Ajax 콜을 통해 데이터를 계속 사용할 수 있도록 이 작업을 다시(또는 이벤트/DataTransfer 개체를 복제)하려면 어떻게 해야 합니까?

MDN 문서에 따라 DataTransfer를 사용하는 방법을 확인했지만 특정 사례에 적용하는 데 어려움을 겪고 있습니다.코드에서 볼 수 있듯이 이벤트 오브젝트도 복사해 보았습니다만, 확실히 상세 복사는 되지 않고, 참조를 통과할 뿐이므로 도움이 되지 않습니다.

    methods: {
        dropHandler: function (event) {
            if (event.dataTransfer.items) {
                let i = 0;
                let self = this;
                let ev = event;

                function uploadHandler() {
                    let items = ev.dataTransfer.items;
                    let len = items.length;

                    // len NOW EQUALS 4

                    console.log("LEN: ", len);
                    if (items[i].kind === 'file') {
                        var file = items[i].getAsFile();
                        $('#id_file_name').val(file.name);
                        var file_form = $('#fileform2').get(0);
                        var form_data = new FormData(file_form); 

                        if (form_data) {
                            form_data.append('file', file);
                            form_data.append('type', self.type);
                        }

                        $('#file_progress_' + self.type).show();
                        var post_url = '/blah/blah/add/' + self.object_id + '/'; 
                        $.ajax({
                            url: post_url,
                            type: 'POST',
                            data: form_data,
                            contentType: false,
                            processData: false,
                            xhr: function () {
                                var xhr = $.ajaxSettings.xhr();
                                if (xhr.upload) {
                                    xhr.upload.addEventListener('progress', function (event) {
                                        var percent = 0;
                                        var position = event.loaded || event.position;
                                        var total = event.total;
                                        if (event.lengthComputable) {
                                            percent = Math.ceil(position / total * 100);
                                            $('#file_progress_' + self.type).val(percent);
                                        }
                                    }, true);
                                }
                                return xhr;
                            }
                        }).done((response) => {
                                i++;
                                if (i < len) {

                                    // BY NOW, LEN = 0.  ????

                                    uploadHandler();
                                } else {
                                    self.populate_file_lists();
                                }
                            }
                        );
                    }
                }

                uploadHandler();
            }
        },

전화하면await함수의 원래 콜스택에 존재하지 않게 되었습니다.이것은 특히 이벤트 청취자에게 중요한 것입니다.

같은 효과를 재현할 수 있습니다.setTimeout:

dropZone.addEventListener('drop', async (e) => {
  e.preventDefault();
  console.log(e.dataTransfer.items);
  setTimeout(()=> {
    console.log(e.dataTransfer.items);
  })
});

예를 들어, 4개의 파일을 드래그 하면 다음과 같이 출력됩니다.

DataTransferItemList {0: DataTransferItem, 1: DataTransferItem, 2: DataTransferItem, 3: DataTransferItem, length: 4}  
DataTransferItemList {length: 0}

이벤트가 발생한 후 상태가 바뀌어 아이템이 분실되었습니다.

이 문제에 대처하려면 다음 두 가지 방법이 있습니다.

• 아이템 복사 및 반복
• 비동기 작업(Promise)을 어레이에 푸시하고 나중에 처리한다.Promise.all

두 번째 솔루션은 사용하는 것보다 직관적입니다.await루프에 있습니다.또, 병렬 접속은 한정되어 있습니다.어레이를 사용하면 청크를 생성하여 동시 업로드를 제한할 수 있습니다.

function pointlessDelay() {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, 1000);
  });
}

const dropZone = document.querySelector('.dropZone');

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
});

dropZone.addEventListener('drop', async (e) => {
  e.preventDefault();
  console.log(e.dataTransfer.items);
  const queue = [];
  
  for (const item of e.dataTransfer.items) {
    console.log('next loop');
    const entry = item.webkitGetAsEntry();
    console.log({item, entry});
    queue.push(pointlessDelay().then(x=> console.log(`${entry.name} uploaded`)));
  }
  
  await Promise.all(queue);
});

body {
  font-family: sans-serif;
}

.dropZone {
  display: inline-flex;
  background: #3498db;
  color: #ecf0f1;
  border: 0.3em dashed #ecf0f1;
  border-radius: 0.3em;
  padding: 5em;
  font-size: 1.2em;
}

<div class="dropZone">
  Drop Zone
</div>

의 문맥인 것 같다.DataTransfer시간이 흐르면서 없어졌어요당사의 솔루션은 필요한 데이터를 누락되기 전에 복사하고 필요할 때 재사용하는 것입니다.

const files = [...e.dataTransfer.items].map(item => item.getAsFile());

솔루션을 사용하여 @Brad의 jsfiddle에서 코드를 수정했습니다.

const dropZone = document.querySelector(".dropZone");
const sendFile = file => {
  const formData = new FormData();
  for (const name in file) {
    formData.append(name, file[name]);
  }
  /**
   * https://docs.postman-echo.com/ - postman mock server
   * https://cors-anywhere.herokuapp.com/ - CORS proxy server
   **/
  return fetch(
    "https://cors-anywhere.herokuapp.com/https://postman-echo.com/post",
    {
      method: "POST",
      body: formData
    }
  );
};

dropZone.addEventListener("dragover", e => {
  e.preventDefault();
});

dropZone.addEventListener("drop", async e => {
  e.preventDefault();
  const files = [...e.dataTransfer.items].map(item => item.getAsFile());
  const responses = [];

  for (const file of files) {
    const res = await sendFile(file);
    responses.push(res);
  }
  console.log(responses);
});

body {
  font-family: sans-serif;
}

.dropZone {
  display: inline-flex;
  background: #3498db;
  color: #ecf0f1;
  border: 0.3em dashed #ecf0f1;
  border-radius: 0.3em;
  padding: 5em;
  font-size: 1.2em;
}

<div class="dropZone">
  Drop Zone
</div>

나는 이 문제에 부딪혔고, 모든 것을 계속하고 싶었다.DataTransfer오브젝트뿐만 아니라items또는types비동기 코드의 API가 소비하기 때문에DataTransfer직접 입력합니다.결국 제가 하게 된 것은new DataTransfer()(드래그 이미지 제외)원고의 속성 위에 효과적으로 카피할 수 있습니다.

(TypeScript에서) 요지는 다음과 같습니다.https://gist.github.com/mitchellirvin/261d82bbf09d5fdee41715fa2622d4a6

// https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/kind
enum DataTransferItemKind {
  FILE = "file",
  STRING = "string",
}

/**
 * Returns a properly deep-cloned object of type DataTransfer. This is necessary because dataTransfer items are lost
 * in asynchronous calls. See https://stackoverflow.com/questions/55658851/javascript-datatransfer-items-not-persisting-through-async-calls
 * for more details.
 * 
 * @param original the DataTransfer to deep clone
 */
export function cloneDataTransfer(original: DataTransfer): DataTransfer {
  const cloned = new DataTransfer();
  cloned.dropEffect = original.dropEffect;
  cloned.effectAllowed = original.effectAllowed;

  const originalItems = original.items;
  let i = 0;
  let originalItem = originalItems[i];
  while (originalItem != null) {
    switch (originalItem.kind) {
      case DataTransferItemKind.FILE:
        const file = originalItem.getAsFile();
        if (file != null) {
          cloned.items.add(file);
        }
        break;
      case DataTransferItemKind.STRING:
        cloned.setData(originalItem.type, original.getData(originalItem.type));
        break;
      default:
        console.error("Unrecognized DataTransferItem.kind: ", originalItem.kind);
        break;
    }

    i++;
    originalItem = originalItems[i];
  }
  return cloned;
}

이렇게 소비하고 나서clone처음에 사용하려고 했던 것과 같은 방법으로evt.dataTransfer:

const clone = cloneDataTransfer(evt.dataTransfer);

언급URL : https://stackoverflow.com/questions/55658851/javascript-datatransfer-items-not-persisting-through-async-calls