手把手教你用Vue.js + Promise实现图片批量上传

2024-01-30 09:31:40

使用 Vue.js 和 Promise 实现图片批量上传

随着互联网的飞速发展，图片在我们日常生活中扮演着日益重要的角色。从社交媒体到电子商务网站，大量图片用于展示产品、服务和其他信息。因此，图片批量上传功能变得尤为关键。

本篇文章将深入探讨如何利用 Vue.js 和 Promise 来实现图片批量上传。我们将逐一解析每个步骤，并提供代码示例，帮助您轻松掌握这项技术。

创建 Vue.js 组件

首先，我们需要创建一个 Vue.js 组件，它包含一个名为 "files" 的 data 属性，用于存储待上传的图片文件，以及一个名为 "uploadImages" 的方法，用于处理图片上传。

export default {
  data() {
    return {
      files: []
    }
  },
  methods: {
    uploadImages() {
      // TODO: Implement image upload logic
    }
  }
}

使用原生 input 标签

接下来，我们将使用原生 input 标签选择待上传的图片文件。这个 input 标签将使用 "style=display:none" 样式隐藏，然后用其他带有不同样式的元素包裹，并在其上添加事件。

<div>
  <input type="file" multiple style="display:none" @change="handleFileSelect">
  <button @click="uploadImages">上传图片</button>
</div>

处理图片上传

在 "handleFileSelect" 方法中，我们将处理图片上传。我们首先获取选中的图片文件，然后使用 Promise.all() 方法同时上传所有文件。

handleFileSelect(event) {
  const files = event.target.files;
  const promises = [];
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    promises.push(this.uploadFile(file));
  }
  Promise.all(promises).then(() => {
    // 所有图片上传成功
  }).catch((error) => {
    // 图片上传过程中发生错误
  });
}

实现 "uploadFile" 方法

最后，我们需要实现 "uploadFile" 方法来上传单个图片文件。在此方法中，我们可以使用 FormData 对象和 XMLHttpRequest 对象来上传图片文件。

uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.send(formData);
}