js-实现文件和图片上传

1、使用file类型的input标签获得文件

web前端的文件读取操作一般都是通过<input type="file" />获取文件。input标签常用的关于文件读取的属性

multiple指定可以一次（注意是一次同时选择多个）选择多个文件。 用户可以用他们选择的平台允许的任何方式从文件选择器中选择多个文件（如，按住 Shift or Control，然后单击）。如果您只想让用户为每个 <input> 选择一个文件，那么省略 multiple 属性。

例如：<input multiple="multiple" type="file" />可以同时读取多个文件

accept限制可以读取的额文件类型

• accept="image/png" 或 accept=".png" — 接受 PNG 文件。
• accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" — 接受 PNG 或 JPEG 文件。
• accept="image/*" — 接受带有一个 image/* MIME 类型的任何文件。（许多移动设备也允许用户在使用它时用摄像头拍照。）
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — 接受 MS Word 文档之类的任何文件。

由于无法用v-model绑定file的input。这里通过监听input的change事件，再通过事件内置的event对象（所有事件都会返回一个Event对象，该对象的target属性值就是触发事件的节点）获得input节点，进而获得input节点的files属性即所读取的所有文件组成的数组。

代码：

<template>
  <div>
    <input @change="get" multiple="multiple" type="file" />
    <img :src="imgSource" />
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      files: '',
      imgSource: '',
    }
  },
  methods: {
    //通过事件内置的event获得input节点
    get: function(event) {
      var file = event.target.files[0]
      console.log(file)
    },
  },
}
</script>

随便选择几组文件，可以看到控制台输出

2、使用FileReader 对象读取文件

FileReader 对象用于读取 File 对象或 Blob 对象所包含的文件内容。浏览器原生提供一个FileReader构造函数，用来生成 FileReader 实例。

var reader = new FileReader();

FileReader 有以下的实例属性。

• FileReader.error：读取文件时产生的错误对象
• FileReader.readyState：整数，表示读取文件时的当前状态。一共有三种可能的状态，0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成。
• FileReader.result：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。
• FileReader.onabort：abort事件（用户终止读取操作）的监听函数。
• FileReader.onerror：error事件（读取错误）的监听函数。
• FileReader.onload：load事件（读取操作完成）的监听函数，通常在这个函数里面使用result属性，拿到文件内容。
• FileReader.onloadstart：loadstart事件（读取操作开始）的监听函数。
• FileReader.onloadend：loadend事件（读取操作结束）的监听函数。
• FileReader.onprogress：progress事件（读取操作进行中）的监听函数。

FileReader 有以下实例方法。

• FileReader.abort()：终止读取操作，readyState属性将变成2。
• FileReader.readAsArrayBuffer()：以 ArrayBuffer 的格式读取文件，读取完成后result属性将返回一个 ArrayBuffer 实例。
• FileReader.readAsBinaryString()：读取完成后，result属性将返回原始的二进制字符串。
• FileReader.readAsDataURL()：读取完成后，result属性将返回一个 Data URL 格式（Base64 编码）的字符串，代表文件内容。对于图片文件，这个字符串可以用于<img>元素的src属性。注意，这个字符串不能直接进行 Base64 解码，必须把前缀data:*/*;base64,从字符串里删除以后，再进行解码。
• FileReader.readAsText()：读取完成后，result属性将返回文件内容的文本字符串。该方法的第一个参数是代表文件的 Blob 实例，第二个参数是可选的，表示文本编码，默认为 UTF-8。

下面是一个读取txt文件并在控制台输出文件内容

<template>
  <div>
    <input @change="get" multiple="multiple" type="file" />
    <img :src="imgSource" />
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      imgSource: '',
    }
  },
  methods: {
    //监听change事件，并通过内置的event对象获得input节点，进而获得存放所有文件的数组
    get: function(event) {
      var file = event.target.files[0]
      var reader = new FileReader()
      //监听文件读取，加载完成后输出文件内容
      reader.onload = function() {
        console.log(reader.result)
      }
      //开始读取文件
      reader.readAsText(file)
    },
  },
}
</script>

随便选择一个txt文件，然后就会在控制台输出文件内容

注意的是文件的读取是一个异步的过程，使用FileReader的相关实例方法开启读取操作，然后调用回调函数，在加载完成后输出文件内容。输出文件内容时，整个代码段的上下文操作已经全部完成。比如上述代码段在reader.readAsText(file)后加一个输出，打开控制台会发现所加的输出在文件内容输出之前。

上述是使用FileReader的onload实例属性添加加载完成后的函数调用。下面用另一种方式挂载函数实现读取图片并显示

代码

<template>
  <div>
    <input
      accept=".img,.png,.jpg"
      @change="get"
      multiple="multiple"
      type="file"
    />
    <img :src="imgSource" />
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      imgSource: '',
    }
  },
  methods: {
    //监听change事件，并通过内置的event对象获得input节点，进而获得存放所有文件的数组
    get: function(event) {
      var file = event.target.files[0]
      var reader = new FileReader()
      //在onload回调函数里面的this指向的reader实例对象而不是vue实例
      let that = this
      //监听文件读取，加载完成后输出文件内容
      reader.addEventListener('load', () => {
        that.imgSource = reader.result
      })
      /* reader.onload = function() {
        that.imgSource = reader.result
      } */
      //开始读取文件
      reader.readAsDataURL(file)
    },
  },
}
</script>

运行

 

参考：阮一峰js教程File 对象，FileList 对象，FileReader 对象