轻松实现vue异步跟随表单上传图片，单张或多张随心选

2023-08-22 01:35:46

在 Vue 中无缝实现单张和多张图片的异步表单上传

简介

在现代互联网应用中，图片扮演着至关重要的角色，从电子商务到社交媒体再到工作协作。作为前端开发人员，我们经常需要处理图片上传功能。本指南将带领您深入浅出地了解如何使用 Vue.js 实现异步表单图片上传，无论是单张图片还是多张图片，都能轻松搞定。

准备工作

在开始之前，我们需要做一些准备工作：

引入 Vue.js 库到页面中
创建一个 Vue 实例
定义变量来接收图片文件
定义函数来处理图片上传

单张图片上传

1. HTML 代码

<input type="file" @change="handleImageUpload">

2. JavaScript 代码

handleImageUpload(event) {
  // 获取图片文件
  const file = event.target.files[0];

  // 创建 FormData 对象
  const formData = new FormData();

  // 将图片文件添加到 FormData 对象中
  formData.append('image', file);

  // 发送请求上传图片
  axios.post('/api/upload', formData)
    .then((response) => {
      // 图片上传成功，返回图片的 URL
      this.imageUrl = response.data.imageUrl;
    })
    .catch((error) => {
      // 图片上传失败，显示错误信息
      console.error(error);
    });
}

多张图片上传

1. HTML 代码

<input type="file" multiple @change="handleImageUpload">

2. JavaScript 代码

handleImageUpload(event) {
  // 获取图片文件列表
  const files = event.target.files;

  // 创建 FormData 对象
  const formData = new FormData();

  // 将图片文件添加到 FormData 对象中
  for (let i = 0; i < files.length; i++) {
    formData.append('image', files[i]);
  }

  // 发送请求上传图片
  axios.post('/api/upload', formData)
    .then((response) => {
      // 图片上传成功，返回图片的 URL 列表
      this.imageUrls = response.data.imageUrls;
    })
    .catch((error) => {
      // 图片上传失败，显示错误信息
      console.error(error);
    });
}