vue中用H5实现文件上传的方法实例代码

实现文件上传是前端开发中非常常见的需求之一。Vue作为当前流行的前端框架，提供了方便易用的组件和API，使得文件上传变得更加简单和快速。本文即将介绍如何利用H5实现文件上传的方法，并提供代码实例供读者参考和学习。

HTML5文件上传简介

HTML5提供了一个新的API，即File API（文件API），来方便地实现前端文件上传。File API主要提供以下两个对象：

• File对象：表示一个文件对象，包含文件名、大小、类型等信息。
• FileReader对象：用于读取文件内容。可以异步读取整个文件或者按照特定的方式（例如按照行读取）逐步读取文件内容。

使用File API可以在不开启浏览器插件的情况下实现文件上传的功能。当然如果您需要兼容IE8及以下版本浏览器，也可以考虑使用Flash等插件来实现。

Vue中使用HTML5上传文件

Vue中使用HTML5上传文件非常简单，只需要在代码中添加一个input标签即可。以下是一条示例代码：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
  </div>
</template>
<script>
export default {
  methods: {
    handleFileUpload (event) {
      const file = event.target.files[0]
      console.log(file)
      // 实现上传逻辑
    }
  }
}
</script>

上述代码中，我们定义了一个input标签，type属性为file，表示可以选择文件进行上传。添加了一个事件监听器，当选择文件后，调用handleFileUpload方法，获取选中的文件对象，并将其打印到控制台中。

上面的代码只是获取选中的文件，并没有实现具体的上传逻辑。下面我们将提供两个不同的示例代码，来展示Vue中实现文件上传的具体实现方法。

示例1: 使用Ajax上传文件

在这个示例中，我们将使用Ajax来发送文件上传请求。具体代码如下：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
  </div>
</template>
<script>
export default {
  methods: {
    handleFileUpload (event) {
      const file = event.target.files[0]
      const formData = new FormData()
      formData.append('file', file)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.axios.post('/api/upload', formData, config)
        .then(response => {
          console.log(response.data)
          // 处理上传成功后的逻辑
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

在上述代码中，我们首先获取用户选择的文件对象，然后构建一个FormData对象，将文件添加到该对象中。接下来，我们使用axios库来发送POST请求，将FormData对象发送给服务器。注意，我们在headers中设置了Content-Type为multipart/form-data。最后，将返回的响应数据处理即可。

示例2: 使用WebSocket上传文件

在这个示例中，我们将使用WebSocket来发送文件上传请求。WebSocket是HTML5中提供的一种新型网络协议，可以实现浏览器和服务器之间的双向通信。具体代码如下：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
  </div>
</template>
<script>
export default {
  data () {
    return {
      ws: null
    }
  },
  methods: {
    handleFileUpload (event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onload = event => {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
          this.ws.send(event.target.result)
        } else {
          console.log('WebSocket连接未成功建立')
        }
      }
    }
  },
  mounted () {
    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
    this.ws = new WebSocket(`${wsProtocol}//${window.location.host}/ws`)
    this.ws.onopen = event => {
      console.log('WebSocket连接已建立')
    }
    this.ws.onmessage = event => {
      console.log(event.data)
      // 处理上传成功后的逻辑
    }
    this.ws.onclose = event => {
      console.log('WebSocket连接已关闭')
    }
    this.ws.onerror = event => {
      console.log('WebSocket连接出错')
    }
  },
  beforeDestroy () {
    if (this.ws) {
      this.ws.close()
    }
  }
}
</script>

在上述代码中，我们首先获取用户选择的文件对象，并使用FileReader来将其转为ArrayBuffer格式，再通过WebSocket发送到服务器。我们使用了onload事件来监听文件读取完成的事件，并在该事件中发送文件内容。在WebSocket的onmessage事件中，我们接收服务器返回的响应数据，并进行处理。

需要注意的是，WebSocket连接是异步进行的，可能会出现连接未成功建立的情况。在mounted生命周期函数中，我们创建了一个WebSocket连接，并处理了其常见事件。在beforeDestroy生命周期函数中，我们关闭WebSocket连接。这是一个良好的编程实践，可以保证Websocket连接的正常结束。

综上所述，以上就是基于Vue使用HTML5来实现文件上传的方法和示例代码。Web开发者可以根据自己的需要进行调整和修改，以满足项目的需求。