Vue は、デスクトップから Web ページにファイルをドラッグするためのサンプル コードを実装します (画像/オーディオ/ビデオを表示できます)

<テンプレート>
 <div>
  <div v-on:dragover="tts" v-on:drop="ttrs" style="幅: 800px;高さ: 200px;境界線: 1px 黒一色;フォントサイズ: 40px;行の高さ: 200px">
   {{dt}}
  </div>
  <div v-for="(item,index) in fileList" :key="index" style="width: 800px;height: 200px;border: 1px solid black;font-size: 40px;position: relative;top:10px">
   <p style="font-size: 20px;float: left;position: relative;left: 20pxword-wrap:break-word;word-break:normal;">{{item.name}}</p>
   <h5 style="float:right;position: absolute;top: 80px;right: 20px">{{item.type}}</h5>
   <h6 style="position: absolute;top: 80px;float: left;left: 20px">{{item.size | sizeType}}</h6​​>
   <button style="float: right" @click="del(index)">削除</button>
  </div>
 </div>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
  名前: "trs",
  データ（）{
   戻る {
    dt:"",
    ファイルリスト:[]
   }
  },
  フィルター:
   サイズタイプ(val){
    kbs = val/1024 とします。
    mbs = 0 とします。
    gbs = 0 とします。
    （KBS>=1024）の場合{
     mbs = kbs/1024;
    }
    mbs>=1024の場合{
     GBS = MBS/1024
     gbs.toFixed(2)+"GB"を返します。
    }そうでない場合 (mbs>=1){
     mbs.toFixed(2)+"MB"を返す
    }それ以外 {
     kbs.toFixed(2)+"KB"を返す
    }
   }
  },
  マウント() {
   vm = this とします。
   window.addEventListener("dragdrop", this.testfunc, false);


   document.addEventListener("dragover",関数() {
    コンソール.log(111)
    vm.dt = "ファイルをアップロードするにはここにドラッグしてください"
    コンソールログ(vm.dt)
   })
  },
  方法:{
   testfunc(イベント) {
    アラート("ドラッグドロップ!");
    イベントの伝播を停止します。
    イベントをデフォルトにしない();
   },
   del(インデックス){
    this.fileList.splice(インデックス,1)
    if(this.fileList.length==0){
     this.dt = ""
    }
   },
   tts(e){
    コンソール.log(e)
    this.dt = "ファイルをアップロードするにはここにドラッグしてください"
   },
   ttrs(e){
    コンソール.log(e)
    コンソールログ(e.dataTransfer.files)
    datas = e.dataTransfer.files とします。
    datas.forEach(item=>{
     this.fileList.push(アイテム)
    })
    e.stopPropagation();
    e.preventDefault();
    this.dt = "アップロードが完了しました。アップロードを続行できます"

   }
  }
 }
</スクリプト>

<スタイルスコープ>

</スタイル>

<テンプレート>
 <div>
 <div
  v-on:dragover="tts"
  v-on:drop="ttrs"
  スタイル="幅: 800px;高さ: 200px;境界線: 1px 黒一色;フォントサイズ: 40px;行の高さ: 200px"
 >
  {{dt}}
 </div>
 <div
  v-for="(item, index) in fileList"
  :key="インデックス"
  スタイル="幅: 800px;高さ: 200px;境界線: 1px 黒一色;フォントサイズ: 40px;位置: 相対;上: 10px"
 >
  <p
  style="font-size: 20px;float: left;position: relative;left: 20pxword-wrap:break-word;word-break:normal;"
  >
  {{アイテム名}}
  </p>
  <h5 style="float:right;position: absolute;top: 80px;right: 20px">
  {{アイテムタイプ}}
  </h5>
  <h6 スタイル="位置: 絶対;上: 80px;フロート: 左;左: 20px">
  {{ item.size | サイズタイプ }}
  </h6>
  <button style="float: right" @click="del(index)">削除</button>
 </div>
 <div style="position:relative;top: 100px">
  <img v-if="isImage" :src="srcs" style="width: 800px" />
  <video v-if="isVideo" コントロール :src="srcs" スタイル="width: 800px"></video>
  <audio v-if="isAudio" コントロール :src="srcs" スタイル="width: 800px"></audio>
 </div>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: "trs",
 データ（） {
 戻る {
  日付: "",
  ファイルリスト: [],
  ソース: "",
  isImage:false、
  isAudio:false、
  isVideo:false
 };
 },
 フィルター:
 サイズタイプ(val) {
  kbs = val / 1024とします。
  mbs = 0 とします。
  gbs = 0 とします。
  （kbs >= 1024）の場合{
  mbs = kbs / 1024;
  }
  mbs >= 1024の場合{
  gbs = mbs / 1024;
  gbs.toFixed(2) + "GB" を返します。
  } それ以外の場合 (mbs >= 1) {
  mbs.toFixed(2) + "MB"を返します。
  } それ以外 {
  kbs.toFixed(2) + "KB"を返します。
  }
 }
 },
 マウント() {
 vm = this とします。
 window.addEventListener("dragdrop", this.testfunc, false);

 document.addEventListener("dragover", 関数() {
  コンソールログ(111);
  vm.dt = "ファイルをアップロードするにはここにドラッグしてください";
  コンソールログ(vm.dt);
 });
 },
 メソッド: {
  readFile(ファイル){
   vm = this とします。
   リーダーを新しいFileReader()にします。
   reader.readAsDataURL(ファイル)
   reader.onload = 関数（）{
    type = file.type.substr(0,5); とします。
    if(type=="画像"){
     vm.isImage が true である。
     vm.isAudio = false;
     vm.isVideo = false;
    }それ以外の場合(type=="audio"){
     vm.isImage = false;
     vm.isAudio が true である。
     vm.isVideo = false;
    }それ以外の場合(type=="video"){
     vm.isImage = false;
     vm.isAudio = false;
     vm.isVideo が true である。
    }それ以外 {
     警告("画像/ビデオ/音声ではありません")
    }
    vm.srcs = リーダーの結果;
    // this.$nextTick(()=>{
    //
    // })
   }
  },
 testfunc(イベント) {
  アラート("ドラッグドロップ!");
  イベントの伝播を停止します。
  イベントをデフォルトにしない();
 },
 del(インデックス) {
  this.fileList.splice(インデックス、1);
  if (this.fileList.length === 0) {
  this.dt = "";
  }
 },
 tts(e) {
  コンソールログ(e);
  this.dt = "ファイルをアップロードするにはここにドラッグしてください";
 },
 ttrs(e) {
  コンソールログ(e);
  console.log(e.dataTransfer.files);
  datas = e.dataTransfer.files とします。
  datas.forEach(item => {
  this.fileList.push(アイテム);
  });
  this.readFile(this.fileList[this.fileList.length-1])

  e.stopPropagation();
  e.preventDefault();

  this.dt = "アップロードが完了しました。アップロードを続行できます";
 }
 }
};
</スクリプト>

<スタイル スコープ></style>