图像文件上传的拖放事件在 Aurelia 中不起作用

Question

我的拖放图片上传功能需要帮助。

我收到一个漂亮的框，上面写着我可以拖放图像，但我的控制台显示：

未捕获的引用错误：拖动未定义 未捕获的 ReferenceError：drop 未定义 未捕获的 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

当您使用 HTML 属性，如 onChange、ondragover 等而不使用 delegate 时，它将查找 drag 函数在全球范围内。而不是在绑定到此视图的 aurelia 视图模型的实例中。您需要使用 delegate 让 aurelia 知道必须使用您的 class 实例。
您的 HTML 中有两个具有相同 id 的元素。 getElementById('imageInputFile') 可能获取了错误的元素。不确定为什么要使用类型为 file 的 input 来预览图像，但您可以将其更改为按钮。
您还需要将上传逻辑添加到drop。我建议将拖放移动到 span，因为它覆盖了您要放置的区域。当 drop 文件时，您的输入不会触发任何 change。
您无需使用 DOM API 添加 classes 并手动设置 src 属性。例如，您可以将 isDragging 属性添加到您的 class。基于这个布尔值属性，将 draging class 设置为 span。您可以在 <div id="preview"></div> 中添加一个 <img src.bind="imageSrc" />。并在 dragNdrop 函数中设置 imageSrc 属性。

Class:

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>

图像文件上传的拖放事件在 Aurelia 中不起作用

Drag and drop events for image file upload not working in Aurelia

javascript

aurelia