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

    <el-form-item label="默认图片" prop="image">
      <div class="uploads">
        <el-upload v-model:file-list="fileList" :action="uploadUrl" list-type="picture-card"
          :headers="uploadHeaders" :limit="1" :auto-upload="false" :before-upload="beforeImgUpload"
          :on-success="handleImgSuccess">
          <el-icon>
            <Plus />
          </el-icon>

          <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; }