时间戳

首页 > 解决方案 > 在Vue中放置图像文件时防止在浏览器中打开图像

vue.js - 在Vue中放置图像文件时防止在浏览器中打开图像

问题描述

当我拖动上面的图像label并实现鼠标左键时，文件会在我的浏览器中打开。因此，prevent修改不足以避免这种默认行为。我还需要做什么？

注意：下面的布局已经用于处理点击事件。

<div class="ImagesUploader"></div>
  <label 
    class="ImagesUploader-ClickableDragAndDropArea"
    role="button"
    @dragover.prevent="onDragOperationStarted"
    @dragleave.prevent="onDragOperationTerminated"
    @drop.prevent="onDrop"
  >
    <input 
      type="file" 
      class="ImagesUploader-HiddenOriginalInput"
      @change="onSelectNewImages"
      accept="image/*,image/jpeg"
    />      
  </label>
</div>

标签： vue.js

解决方案

在这种情况下，@drop.stop.prevent需要。处理方式如下：

onDrop(event) {
  const file = event.dataTransfer.files[0];
  // ...
}
``

推荐阅读