引言
随着互联网的普及和多媒体内容的增加，图片上传和管理变得日益重要。Vue.js 作为一种流行的前端框架，为开发者提供了强大的组件化和数据绑定能力。本文将介绍如何利用 Vue.js 实现单文件批量上传，并轻松管理你的图片库。
系统需求
Vue.js 2.x 或 3.x
HTML5 文件输入元素
JavaScript（可选：axios 或 fetch 用于发送请求）
步骤一：创建 Vue 项目
首先，你需要创建一个 Vue 项目。以下是在命令行中创建 Vue 2.x 项目的示例：
vue create vue-image-upload
或者，如果你使用 Vue 3.x：
npm init vue@latest
步骤二：添加文件输入元素
在 Vue 组件的模板中，添加一个文件输入元素，并设置
multiple
属性以允许批量选择文件：
步骤三：处理文件选择事件
在组件的
methods
部分，添加一个处理文件选择事件的函数
handleFiles
：
步骤四：实现文件上传逻辑
在
uploadFiles
方法中，可以使用
FormData
对象来包装文件，并使用
fetch
或
axios
发送异步请求：
uploadFiles(files) {
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(‘Files uploaded:’, data);
})
.catch(error => {
console.error(‘Error uploading files:’, error);
});
}
确保你的服务器端支持文件上传，并且能够处理
multipart/form-data
类型的请求。
步骤五：图片预览和进度显示
为了提供更好的用户体验，可以添加图片预览和上传进度显示：
在
uploadFiles
方法中，你需要跟踪每个文件的上传进度，并在
uploadProgress
数组中更新相应的值。
总结
通过以上步骤，你可以在 Vue.js 应用中实现单文件批量上传，并轻松管理你的图片库。这个示例仅是一个起点，你可以根据具体需求扩展和优化功能。