input类型为file获取文档流

input类型为file获取文档流

type为file的是文件上传的类型。使用户可以选择一个或多个元素以提交表单的方式上传到服务器上。

 <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required> 

 <el-input v-model="FormData.task_file" style="width:300px" type="file" placeholder="请输入内容" accept=".xls,.xlsx" @blur="event => eventHandler('change', event)" /> 

1、常用属性

accept属性接收字符串，表示可以上传的文件类型。这个字符串可以是扩展类型也可以是MIME类型。例如，accept=“image/png, image/jpeg” or accept=".png, .jpg, .jpeg"

multiple属性为布尔类型，默认为false。表示是否可以多选。

required属性为布尔类型，默认为false。表示此输入框必填。

Vue中的属性

v-model为绑定数据，这里获取到的是string类型的文件地址

常用事件有@blur、@focus、@change、@input、@clear

change是修改确认，也就是回车或失去焦点时触发，input是输入改变时触发。

clear是点击由 clearable 属性生成的清空按钮时触发。

2、获取文件对象

原生js通过获取dom对象来获得

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required>
// 获取dom 对象
let file = document.getElementById("avatar");
// FileList 对象如下：
let fileList = file.files;  // 表示 fileList 对象集合

Vue中可以通过事件及取回调参数获得

<el-input v-model="FormData.task_file" style="width:300px" type="file" placeholder="请输入内容" accept=".xls,.xlsx" @blur="event => eventHandler('change', event)" />
eventHandler(type, event) {
      const handler = {
        change: event => (this.FormData.file = event.target.files[0])
      }
      handler[type] && handler[type](event)
      console.log(event.target.files[0]?.size, '文件大小')
      if (event.target.files[0]?.size > 1024 * 1024 * this.limit) {
        this.FormData.file = {}
        this.FormData.task_file = ''
        this.$message.error(`文件太大，请上传小于${this.limit}M的文件哦`)
      }
}

File对象中通常包含：

    name：文件名

    lastModified：UNIX timestamp 形式的最后修改时间

    lastModifiedDate： Date 形式的最后修改时间

    size：文件的字节大小

    type：文件的MIME类型

 

更丰富的MIME类型：

 

扩展类型	MIME类型
.cvs	text/csv
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt	application/vnd.ms-powerpoint
.pptx	application/vnd.openxmlformats-officedocument.presentationml.presentation
.pdf	application/pdf
.png	image/png
.jpeg .jpg	image/jpeg
.gif	image/gif
.rar	application/x-rar-compressed
.zip	application/zip
.xml	application/xml