聊聊vue图片上传的三种方法

随着互联网发展，图片上传已经成为了日常开发的一个重要功能。在 vue 开发中，我们也有多种方式来实现图片上传，如使用第三方插件、原生 ajax 以及利用 html5 的 filereader。本文将会介绍这三种实现图片上传的方式以及各自的优缺点，希望对你有所帮助。

1.使用第三方插件

在 Vue 开发中，我们可以使用一些已经被广泛使用的第三方插件来实现图片上传，比如 Vue-Upload、Vue-Core-Image-Upload 等等。这些插件已经经过了很多人的使用和测试，可以有效地加速我们开发的进程，并且它们可以快速地集成进我们的项目中。这里我们以 Vue-Upload 为例来讲解其使用方法。

第一步是安装插件，在命令行中输入：

npm install vue-upload

第二步是引入插件，在需要使用的组件中引入 Vue-Upload：

立即学习“前端免费学习笔记（深入）”；

import VueUpload from 'vue-upload'

第三步是在组件中使用，我们将一个 button 作为触发器来选择图片，再利用 Vue-Upload 的功能来上传图片：

<button @click="upload()">选择文件</button>
<VueUpload ref="upload"
           :post-action="'url'"
           :headers="headers"
           :name="'file'"
           @input="onUpload"></VueUpload>

其中，post-action 为上传的地址，headers 为请求头，name 为文件字段名。onUpload 方法是上传完成后调用的方法。

Vue-Upload 的优点在于快速方便，但是缺点也很明显，即我们无法完全自定义上传的功能。

2.原生 Ajax

Vue 中也支持原生 Ajax 请求来完成图片上传。我们可以在组件中实现一个 input 输入框，再用 Ajax 把 input 中选择的文件上传到服务器。这种方法需要自己实现完整的上传流程，包括上传进度以及异常处理等等，但是我们能够自由地定制上传的功能，也不会受到第三方插件的束缚。

第一步是在模板中添加一个 input 输入框：

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

20

查看详情

<input ref="file" type="file" @change="upload()">

第二步是在 Vue 的 methods 中实现上传的逻辑：

upload: function () {
  const fileInput = this.$refs.file;
  const file = fileInput.files[0]
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: e => {
      // 上传进度的处理逻辑
    }
  }).then(res => {
    // 上传成功的处理逻辑
  }).catch(err => {
    // 异常处理逻辑
  })
}

这段代码中利用了 axios 来发送 Ajax 请求，我们可以自行选择其他的网络请求库。onUploadProcess 为上传进度的回调函数，我们可以在其中实现上传进度的处理逻辑。

3.利用 HTML5 的 FileReader

HTML5 的 FileReader 提供了一种新的方式来读取用户本地设备的文件，我们可以利用它来完成图片上传。这种方式可以避免浏览器的默认提交和页面跳转，也更加友好地与 Vue 的组件化开发方式结合起来。

第一步是在组件的 data 中定义一个 image 变量和一个 fileReader 对象：

data: function () {
  const fileReader = new FileReader();
  fileReader.onload = () => {
    this.image = fileReader.result;
  };
  
  return {
    image: null,
    fileReader: fileReader
  };
}

第二步是在组件的 methods 中实现文件读取和上传的逻辑：

upload: function () {
  const fileInput = this.$refs.file;
  const file = fileInput.files[0]
  this.fileReader.readAsDataURL(file);
},
submit: function () {
  const image = this.image;
  axios.post('/upload', {image: image})
    .then(res => {
      // 上传成功的处理逻辑
    }).catch(err => {
      // 异常处理逻辑
    })
}

这里我们将图片读取后存在了一个 image 变量中，接着再将图片提交给服务器。这种方法的优点在于界面友好，图片处理逻辑清晰，缺点在于无法支持上传进度的显示。

总结

本文介绍了在 Vue 中实现图片上传的三种方法，它们分别是使用第三方插件、原生 Ajax 以及利用 HTML5 的 FileReader。每种方法都有其优缺点，开发者可以根据项目的实际需求来选择合适的方法。图片上传是一个常见的功能，掌握这些上传的方法也是 Vue 开发者必备的技能之一。

以上就是聊聊vue图片上传的三种方法的详细内容，更多请关注php中文网其它相关文章！