Vue通过操作Dom元素 实现 拖拽文件到网页进行文件上传【JS/JQ 原理也是一样的】

效果:

拖入文件前:

拖入文件后:

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();    //阻止拖来拖去的浏览器默认行为    };  },};