js上传多个文件

<template>
  <!--
    <input class="importInput" v-if="clearShow" ref="importFile" type="file" v- 
    on:change="getFile($event)" :disabled="btnStatus" 
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, 
    application/vnd.ms-excel" />
  -->
  <input style="display: none" type="file" ref="fileInput" multiple="multiple" 
  @change="uploadFile" />
</template>

methods:{
  // 附件上传
    uploadFile(e) {
      console.log(e,e.target.files);
      // console.log(this.$refs.fileInput.value);
      var fileName = e.target.files[0].name;
      var fileType = [ "doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf", "jpg", "png", 
         "txt", "rar", "zip", "7z", "gz" ];
      var arr = fileName.split(".");
      console.log("点点点点点点",fileName,fileName.substr(fileName.lastIndexOf( "." )+1),fileName.substr(0,fileName.lastIndexOf( "." )))
      var Fdata = []
      var formData = new FormData();
      for(let i = 0;i<e.target.files.length;i++){
          console.log("xinahuan--000",e.target.files[i].name.split(".")[arr.length - 1])
        //   if(!fileType.includes(e.target.files[i].name.split(".")[arr.length - 1])){
        if(!fileType.includes(e.target.files[i].name.substr(e.target.files[i].name.lastIndexOf( "." )+1))){
              this.$message({
                message: "上传的文件格式不对",
                type: "warning",
              });
              this.$refs.fileInput.value = "";
              return;
          }else{
              Fdata.push(e.target.files[i])
          }
       }
       Fdata.forEach(function(file){
            formData.append('file',file,file.name)
        })
    //   if (!fileType.includes(arr[arr.length - 1])) {
    //     this.$message({
    //       message: "上传的文件格式不对",
    //       type: "warning",
    //     });
    //     this.$refs.fileInput.value = "";
    //     return;
    //   }
 
    //   var fileData = e.target.files[0];
    //   var formData = new FormData();
    //   formData.append("file", fileData);
      var time = parseTime(new Date(), "yyyy-MM-dd hh:mm:ss");
      importFile(
        formData,
        function (obj) {
          if (obj.data.Result) {
            for(var fileData of obj.data.Data){
                this.data2.push({
                    FileName: fileData.fileName,
                    UpdateTime: time,
                    FilePath: fileData.filePath,
                });
            } 
            /* this.data2.push({
                FileName: obj.data.Data.fileName,
                UpdateTime: time,
                FilePath: obj.data.Data.filePath,
            }); */
            this.$refs.fileInput.value = "";
          }
        }.bind(this)
      );
    },
  // 点击上传附件
  upload() {
    this.$refs.fileInput.click();
    //或this.$refs.fileInput.dispatchEvent(new MouseEvent('click'));
    //或this.$refs.fileInput.dispatchEvent(new Event('click'));
  },
}

<input class="importInput" v-if="clearShow" ref="importFile" type="file" v- 
    on:change="getFile($event)" :disabled="btnStatus" 
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, 
    application/vnd.ms-excel" />

input 中 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"的作用如下：解决前端做excel下载的文件打不开

常用的excel对应得mine-type类型： 

1.  "application/vnd.ms-excel" 

2.  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

解决办法：

A： content-type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 的方案

1. 查看浏览器请求中content-type使用的是哪种mine-type

 

2. 需要在请求参数中设置 responseType: 'arraybuffer'

3. 下载按钮代码如下

 

B. content-type: "application/vnd.ms-excel" 的方案

1. 下载按钮代码

 

JS DOM编程笔记 - dispatchEvent() 代码触发事件（二一）

在JavaScript中绑定的点击、键盘等事件，如果要触发它，需要用户手动去触发它。

今天我们将通过代码的方式来触发这些事件。

我们将会用到Event 构造函数和 element.dispatchEvent()方法。

使用代码来生成事件的步骤如下：

• 首先用Event 构造函数创建一个新的 Event 对象。
• 然后，使用 dispatchEvent() 方法触发事件。

Event 构造函数

使用Event 构造函数来创建一个新事件：

let event = new Event(type, [,options]);

Event 构造函数接受两个参数：

type

指定事件类型，比如click。

options

为对象类型，有两个属性：

• bubbles：为布尔值，表示事件是否冒泡。如果为true，则事件冒泡，反之亦然。
• cancelable：也是布尔值，表示事件是否可以取消，如果为true，则可以取消，反之亦然。

默认options对象为：

{ bubbles: false, cancelable: false}

下面我使用默认的options创建了一个点击事件

let clickEvent = new Event('click');

dispatchEvent 方法

创建完事件后，我们就可以使用dispatchEvent() 方法在目标元素上触发它，像这样

element.dispatchEvent(event);

下面我在一个页面中来测试它：

<button class="btn">测试dispatchEvent()方法</button>

<script>
  let btn = document.querySelector('.btn');

  btn.addEventListener('click', function () {
    alert('点击了');
  });

  let clickEvent = new Event('click');
  btn.dispatchEvent(clickEvent);
</script>

点击此处查看在线示例：

https://codepen.io/cmdfas-the-bashful/pen/JjyLJRQ

在上面的例子中，我们不用手动点击按钮就会触发事件监听程序，就像我们点击了按钮一样。

那么我们如何区分事件是由用户触发还是代码触发呢？

问的好，如果事件来自用户操作，则 event.isTrusted 属性为 true。如果事件由代码触发，则 event.isTrusted 为 false。

所以，我们可以通过判断 event.isTrusted 属性的值来确定事件是否由用户触发。

Event 是 UIEvent 的父类，UIEvent 是其他特定事件类型的父类，例如 MouseEvent、TouchEvent、FocusEvent 和 KeyboardEvent。

我们最好使用 MouseEvent 这样的详细事件构造函数而不是通用的 Event 构造函数，因为这些构造函数提供了更多特定于事件的信息。

例如，MouseEvent 事件有许多其他属性，例如 clientX 和 clientY，它们指定事件发生时相对于视口的水平和垂直坐标：

let clickEvent = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  clientX: 150,
  clientY: 150
});

下面链接展示了MouseEvent的全部属性：

https://www.w3.org/TR/uievents/#idl-mouseevent

总结

• 我可以使用特定的事件构造函数（例如 MouseEvent）并在元素上调用 dispatchEvent() 方式手动触发事件。
• 通过使用 event.isTrusted 判断事件是由代码还是用户触发。