vue3 el-upload实现上传图片为base64格式并存储进表单

原创已于 2025-05-29 15:48:55 修改

· 319 阅读

0 ·

版权

文章标签：

#vue3 #el-upload #el-form

于 2025-05-29 15:46:28 首次发布

在这里插入图片描述

一、template

<el-form-item label="图片" prop="images">
            <el-upload
              action="#"
              :accept="['image/jpeg', 'image/png', 'image/gif'].join(',')"
              list-type="picture-card"
              :auto-upload="true"
              :on-change="handleUploadChange"
              :before-upload="beforeUpload"
              :file-list="fileList"
              :http-request="customUpload"
              :on-remove="handleRemove"
              :on-preview="handlePictureCardPreview"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
......
......
......
<el-dialog v-model="imgVisible" style="wigth: 60%; height: auto">
    <img :src="dialogImageUrl" alt="Preview Image" style="width: 100%" />
 </el-dialog>

二、js

import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
......
......
......
const fileList = ref<Array<{ name: string; url: string }>>([]) // 用于显示已上传的图片列表（最多1张）

// 限制上传文件类型和大小
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件！')
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB！')
  }
  return isImage && isLt2M
}

// 自定义上传逻辑
const customUpload = async (options) => {
  const file = options.file
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onload = (e) => {
      formData.value.images = e.target.result // 将Base64存入formData
      fileList.value = [
        {
          name: file.name, // 保留文件名
          url: e.target.result as string // 完整的 Base64 URL
        }
      ] // 更新文件列表（仅1张）
      resolve(true)
    }
    reader.readAsDataURL(file) // 转换为Base64
  })
}

// 处理文件变化（可选）
const handleUploadChange = (file) => {
  console.log('当前文件:', file)
}

// 处理删除操作
const handleRemove = () => {
  formData.value.images = '' // 清空Base64数据
  fileList.value = [] // 清空文件列表
}
const dialogImageUrl = ref('')
const imgVisible = ref(false)
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  imgVisible.value = true
}

注意：在open表单的方法里初始化 fileList（编辑时回显图片)

// 初始化 fileList（编辑时回显图片）
      if (formData.value.images) {
        fileList.value = [{ url: formData.value.images }]
      }

注意：在需要的地方置空图片（例如关闭弹窗时)

 fileList.value = [] // 清空 fileList