《Nuxt.js 实战：从放弃到入门》四、轻松制作朋友圈九宫格图片

功能说明

1. 设计风格：图片分割功能页面将参考某网页的设计风格，使用 Element Plus 组件库实现界面，旨在确保用户体验流畅，同时保证界面的美观性与易用性。
2. 页面功能：

• 图片上传区域：支持用户将图片直接拖拽到指定区域进行上传，也可点击上传。仅支持 JPG 和 PNG 格式，文件大小限制为 10MB。
• 分割参数设置：用户可通过输入行数和列数来设置图片分割的参数，行数和列数的取值范围为 1 到 10。
• 预览区域：提供上传图片的预览以及分割后图片的预览，方便用户查看分割效果。
• 下载功能：支持将分割后的图片打包成 ZIP 文件进行下载。

代码实现

1. 创建页面文件：在项目中创建divide.vue文件，用于实现图片分割功能页面。

<template>
  <div class="container">
    <el-card>
      <template #header>
        <div class="text-center">
          <span class="text-xl font-medium">图片分割</span>
        </div>
      </template>

      <!-- 图片上传区域 -->
      <el-upload
          class="upload-area"
          drag
          :auto-upload="false"
          :show-file-list="false"
          accept="image/*"
          :on-change="handleFileSelect"
      >
        <template #trigger>
          <div v-if="!imageUrl && !isLoading && !errorMessage" class="text-center">
            <el-icon class="el-icon--upload mx-auto block"><upload-filled /></el-icon>
            <div class="el-upload__text">
              拖拽图片到此处或 <em>点击上传</em>
            </div>
            <div class="text-sm text-gray-400 mt-2">支持 JPG、PNG 格式</div>
          </div>
        </template>
      </el-upload>

      <div v-if="isLoading" class="text-center">
        <el-icon class="is-loading" :size="24"><loading /></el-icon>
        <div class="text-gray-600">正在处理图片...</div>
      </div>

      <div v-else-if="errorMessage" class="text-center">
        <el-alert
            :title="errorMessage"
            type="error"
            :closable="false"
        />
        <el-button type="primary" @click="</