图片管理：从图片获取到上传与删除的 API 数据交互

原创

繁依Fanyi

发布于 2024-11-26 20:29:21

2.2K0

在文章开始之前，推荐一些很值得阅读的好文章！感兴趣的也可以去看一下哦！

今日推荐：Spring AI再更新：如何借助全局参数实现智能数据库操作与个性化待办管理

文章链接：https://cloud.tencent.com/developer/article/2464797

这篇文章详细介绍了Spring AI的新特性，特别是如何利用全局参数实现CRUD操作和个人待办管理，内容深入、实用性强，对开发者理解智能数据库交互和Spring AI的应用有很大帮助。

在现代 web 开发中，图片的处理与交互是一个常见且复杂的需求，尤其是当我们需要在应用中展示、上传、删除图片时。本文将重点讲解如何通过 API 实现图片的获取、上传与删除功能，并结合 Vue.js 组件的实现方式，提供一个全面的图片交互模块。

图片获取：如何高效分页获取图片

在许多应用中，图片数量庞大，因此采用分页加载图片是一种常见且有效的方式。通过分页，我们可以在用户浏览时逐步加载图片，而不是一次性加载所有图片，避免性能瓶颈。为了实现这一功能，我们需要向后端发送请求，获取当前页的图片数据，并根据返回的总图片数（total）和每页图片数量（perPage）来计算总页数。

async fetchImages() {
  if (this.isLoading) return;

  this.isLoading = true;

  try {
    const response = await axios.post("/get-gallery-images", {
      id: this.galleryId.id,
      gallery: this.galleryId.name,
      page: this.currentPage,
      page_size: this.perPage,
    });

    const { images, total } = response.data;

    const imagesWithId = images.map((image, index) => ({
      ...image,
      id: `${this.currentPage}-${index}`,
    }));

    this.images = [...this.images, ...imagesWithId];
    this.totalPages = Math.ceil(total / this.perPage);
    this.currentPage++;
  } catch (error) {
    console.error("获取图片失败:", error);
  } finally {
    this.isLoading = false;
  }
}

如上代码所示，fetchImages 方法会向 API 请求当前页的图片数据，并根据返回的 images 和 total 来更新图片列表。每个图片项还会附加一个唯一的 id，通过页码和图片索引的组合生成。通过这种方式，用户在滚动页面时，能够顺畅地加载更多图片。

图片上传：实时显示上传进度

当涉及到图片上传时，实时显示进度对于用户体验至关重要。通过监听 onUploadProgress 事件，我们能够跟踪文件上传的进度，并实时更新上传的进度条。为了实现这一点，我们创建了一个临时的图片对象，在上传过程中显示进度条，直到上传完成。

async handleDrop(event) {
  const files = Array.from(event.dataTransfer.files);

  files.forEach(async (file, index) => {
    if (file.type.startsWith("image/")) {
      const formData = new FormData();
      formData.append("file", file);
      formData.append("gallery_id", this.galleryId.id);
      formData.append("gallery", this.galleryId.name)

      const newImage = {
        id: `temp-${Date.now()}-${index}`,
        url: "",
        name: file.name,
        uploadProgress: { percentage: 0 },
      };
      this.images.push(newImage);

      try {
        const response = await axios.post("/upload-image", formData, {
          headers: { "Content-Type": "multipart/form-data" },
          onUploadProgress: (progressEvent) => {
            const percentage = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            newImage.uploadProgress.percentage = percentage;
          },
        });

        Object.assign(newImage, response.data);
        delete newImage.uploadProgress;
      } catch (error) {
        console.error("上传图片失败:", error);
        this.images = this.images.filter(img => img.id !== newImage.id);
        this.$message.error("图片上传失败，请重试！");
      }
    }
  });
}

通过 handleDrop 方法，我们可以接收拖拽上传的文件，并通过 axios 发送上传请求。在上传过程中，我们会根据进度实时更新图片的上传进度，显示一个进度条，直到上传完成。如果上传失败，我们会移除上传过程中产生的临时图片，并提示用户上传失败。

图片删除：用户自定义删除操作

除了获取和上传图片外，删除图片也是常见的需求。在这个模块中，我们通过右键菜单触发图片的删除操作。当用户右键点击某张图片时，我们会显示一个删除选项。点击该选项后，前端会调用删除 API 请求，成功删除图片后，会从当前图片列表中移除该图片。

async confirmDeleteImage() {
  if (this.contextMenuIndex !== null) {
    const imageToDelete = this.images[this.contextMenuIndex];

    const payload = {
      gallery: this.galleryId.name,
      image: imageToDelete.name,
    };

    try {
      await axios.delete("/delete-image", { data: payload });
      this.images.splice(this.contextMenuIndex, 1);
      this.$message.success(`图片 ${imageToDelete.name} 删除成功`);
    } catch (error) {
      console.error("删除图片失败:", error);
      this.$message.error(`删除图片失败: ${error.response?.data?.error || "未知错误"}`);
    } finally {
      this.closeContextMenu();
    }
  } else {
    console.warn("未选择图片，无法删除");
  }
}

如上所示，confirmDeleteImage 方法会在用户确认删除时调用删除 API，并在成功后从图片数组中移除该图片。如果删除失败，我们会显示错误信息给用户。

结语

本文介绍了如何通过 API 实现图片的获取、上传和删除功能。通过分页获取图片，我们避免了一次性加载所有图片带来的性能问题；通过实时更新上传进度，我们提升了用户体验；通过右键菜单，我们让图片删除操作变得更加直观和便捷。结合 Vue.js 的响应式系统和 axios，这些功能能够在现代 Web 应用中顺畅地运作，极大提升了图片管理的效率和用户体验。

希望这篇文章能为你在实现类似功能时提供一些思路和帮助。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

登录后参与评论

0 条评论

热度