backend/docs/调用图片上传组件.md

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <el-icon>
                  <ZoomIn />
                </el-icon>
              </span>
              <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                <el-icon>
                  <Delete />
                </el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>

      <div class="upload-tip">
        <span>建议尺寸：250px × 140px</span>
      </div>
    </div>
  </el-form-item>

import { uploadFile } from '@/api/file.js'; import { ElMessage, ElUpload } from 'element-plus'

// 上传相关 const fileList = ref<any[]>([]) const dialogVisible = ref(false) const dialogImageUrl = ref('')

function beforeImgUpload(file: File) { const isImage = file.type.startsWith('image/') const isLt10M = file.size / 1024 / 1024 < 10 if (!isImage) ElMessage.error('仅支持图片格式') if (!isLt10M) ElMessage.error('图片大小不能超过10MB') return isImage && isLt10M }

function handleImgUpload(file: File) { const formData = new FormData() formData.append('file', file) formData.append('cate', 'article')

uploadFile(formData).then((res: any) => { if (res?.url) { formData.image = res.url fileList.value = [{ name: file.name, url: res.url }] } }).catch((error: any) => { ElMessage.error('上传失败：' + (error.msg || '未知错误')) }) }

function handlePictureCardPreview(file: any) { dialogImageUrl.value = file.url dialogVisible.value = true }

function handleRemove(file: any) { fileList.value = [] formData.image = '' }

.uploads{ display: flex; flex-direction: column; } .upload-tip { font-size: 12px; color: #999; }