效果:

拖入檔案前:

拖入檔案後:

html:

<div id="select_frame">
    <div ref="select_frame" class="box">
        將檔案拖拽到這裡
    </div>
    <div class="filebox">
        <p v-if="fileList.length<1">暫無檔案</p>
        <ol>
            <li v-for="item in fileList">
 
{{item.name}}</li>
        </ol>
    </div>
    <button style="outline:none;float:right;"  type="submit" class="btn btn-primary">解 析</button>
</div>

js:

export default{
  name: 'patchCheck',
  data() {
    return {
      infoshow: false,
      fileList: [],
    };
  },
  mtehods
 
: {

  },
  components: {
    layout: Layout,
  },
  mounted() {
    this.$refs.select_frame.ondragleave = (e) => {
      e.preventDefault();  //阻止離開時的瀏覽器預設行為
    };
    this.$refs.select_frame.ondrop = (e) => {
      e.preventDefault();    //阻止拖放後的瀏覽器預設行為
      const data = e.dataTransfer.files;  //
 
 獲取檔案物件
      if (data.length < 1) {
        return;  // 檢測是否有檔案拖拽到頁面     
      }
      console.log(e.dataTransfer.files);
      const formData = new FormData();
      for (let i = 0; i < e.dataTransfer.files.length; i++) {
        console.log(e.dataTransfer.files[i]);
        if (e.dataTransfer.files[i].name.indexOf('map') === -1) {
          alert('只允許上傳.map檔案');
          return;
        }
        formData.append('uploadfile', e.dataTransfer.files[i], e.dataTransfer.files[i].name);
      }
      this.fileList = this.fileList.concat(e.dataTransfer.files[0]);
      console.log(formData, this.fileList, e.dataTransfer.files[0]);
    };
    this.$refs.select_frame.ondragenter = (e) => {
      e.preventDefault();  //阻止拖入時的瀏覽器預設行為
      this.$refs.select_frame.border = '2px dashed red';
    };
    this.$refs.select_frame.ondragover = (e) => {
      e.preventDefault();    //阻止拖來拖去的瀏覽器預設行為
    };
  },

};