圖片文件上傳的拖放事件在Aurelia中不起作用

Question

我需要圖像上傳功能的拖放幫助。

我收到一個不錯的框，說我可以拖放圖像，但是控制台的意思是：

未捕獲的ReferenceError：未定義拖動未 捕獲的ReferenceError：未定義拖放未 捕獲的ReferenceError：未定義dragNdrop

當我單擊並拖動圖像時。

我想念什么？

這是我的代碼示例：

HTML

<div class="form-group">
    <label for="imageInputFile">Ladda upp bild</label>
    <input ref="fileInput" type="file" id="imageInputFile" 
                click.delegate="previewImage()">
</div>
<strong>OR</strong>

<span class="dragBox">
    Drag and Drop image here
    <input type="file" onChange="dragNdrop(event)" ondragover="drag()" ondrop="drop()" id="imageInputFile" />
</span>

<div id="preview"></div>

JS

  dragNdrop(event) {
    let fileName = URL.createObjectURL(event.target.files[0]);
    let preview = document.getElementById("preview");
    let previewImg = document.createElement("img");
    previewImg.setAttribute("src", fileName);
    preview.innerHTML = "";
    preview.appendChild(previewImg);
  }
  drag() {
    document.getElementById('imageInputFile').parentNode.className = 'draging dragBox';
  }
  drop() {
    document.getElementById('imageInputFile').parentNode.className = 'dragBox';
  }

編輯HTML

<span class="dragBox">
    Click here or drag images here
    <input ref="fileInput" type="file" change.trigger="dragNdrop($event)" 
                dragover.delegate="drag()" drop.delegate="drop()" 
                id="imageInputFile" />
</span>

<div id="preview"></div>

我的常規圖像上傳按鈕可以添加新圖像，但這似乎不可行。

Answer 1

• 當您使用不帶delegate HTML屬性（如onChange ， ondragover等）時，它將在全局范圍內查找drag功能。 而不是aurelia的視圖模型綁定到該視圖。 您需要使用delegate來讓aurelia知道必須使用您的類的實例。

• 您的HTML中有兩個具有相同id元素。 getElementById('imageInputFile')可能獲取了錯誤的元素。 不確定為什么要input帶有用於預覽圖像的類型file的input ，但是可以將其更改為按鈕。

• 您還需要添加上傳邏輯來drop 。 我建議將拖放移動到span因為它覆蓋了您要放置的區域。 drop文件時，您的輸入不會觸發任何change 。

• 您無需使用DOM API手動添加類並設置src屬性。 例如，您可以將isDragging屬性添加到您的類。 基於此布爾屬性，將draging類設置為span 。 您可以在<div id="preview"></div>內添加<img src.bind="imageSrc" /> <div id="preview"></div> 。 並在dragNdrop函數中設置imageSrc屬性。

類：

dragNdrop(event) {
   const self = this;
   let fileName = URL.createObjectURL(event.target.files[0]);
   self.imageSrc = fileName; // that's it
}

drag() {
  const self = this;
  self.isDragging = true;
}

drop(event) {
  const self = this;
  self.isDragging = false;
  self.dragNdrop(event);
}

HTML：

<button type="button" click.delegate="previewImage()">Preview</button>
<span class="dragBox ${isDragging ? 'draging' : ''}" 
      dragover.delegate="drag()" 
      drop.delegate="drop($event)">

    Click here or drag images here
    <input id="imageInputFile" type="file" change.trigger="dragNdrop($event)" />
</span>

<div id="preview">
   <img show.bind="imageSrc" src.bind="imageSrc" />
</div>