随着互联网发展，图片上传已经成为了日常开发的一个重要功能。在 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 输入框：
<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 开发者必备的技能之一。
