ElementPlus的el-upload组件使用方式(图片上传)

<template>
  <el-upload
    action="/api/upload"  // 上传地址
    list-type="picture-card"  // 显示为图片卡片
    :on-preview="handlePreview"  // 点击已上传文件时的回调
    :on-remove="handleRemove"  // 移除文件时的回调
    :on-success="handleSuccess"  // 上传成功回调
    :on-error="handleError"  // 上传失败回调
    :file-list="fileList"  // 已上传文件列表
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue';

const fileList = ref([]);

const handlePreview = (file) => {
  console.log('预览文件:', file);
};

const handleRemove = (file, fileList) => {
  console.log('移除文件:', file, fileList);
};

const handleSuccess = (response, file, fileList) => {
  console.log('上传成功:', response, file, fileList);
};

const handleError = (err, file, fileList) => {
  console.error('上传失败:', err, file, fileList);
};
</script>

<template>
  <el-upload
    action="/api/upload"
    list-type="picture-card"
    :file-list="fileList"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
    :limit="3"
    :on-exceed="handleExceed"
    accept="image/*"
  >
    <i class="el-icon-plus"></i>
    <template #tip>
      <div class="el-upload__tip">
        只能上传jpg/png文件，且不超过500KB
      </div>
    </template>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const fileList = ref([]);

const handlePreview = (file) => {
  console.log('预览:', file);
};

const handleRemove = (file, files) => {
  console.log('移除:', file, files);
};

const handleSuccess = (response, file, files) => {
  ElMessage.success('上传成功');
  console.log('成功:', response, file, files);
};

const handleError = (err, file, files) => {
  ElMessage.error('上传失败');
  console.error('失败:', err, file, files);
};

const beforeUpload = (file) => {
  const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt500KB = file.size / 1024 < 500;

  if (!isJPGorPNG) {
    ElMessage.error('只能上传JPG/PNG格式的图片!');
    return false;
  }
  if (!isLt500KB) {
    ElMessage.error('图片大小不能超过500KB!');
    return false;
  }
  return true;
};

const handleExceed = (files, fileList) => {
  ElMessage.warning(`最多只能上传3张图片，您选择了${files.length}张，共${files.length + fileList.length}张`);
};
</script>

<style>
.el-upload__tip {
  margin-top: 7px;
  color: #666;
  font-size: 12px;
}
</style>

<template>
  <el-upload
    ref="uploadRef"
    action="/api/upload"
    :auto-upload="false"
    :file-list="fileList"
    :on-success="handleSuccess"
  >
    <template #trigger>
      <el-button type="primary">选择文件</el-button>
    </template>
    <el-button type="success" @click="submitUpload">开始上传</el-button>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue';

const uploadRef = ref();
const fileList = ref([]);

const submitUpload = () => {
  uploadRef.value.submit();
};

const handleSuccess = (response) => {
  console.log('上传成功:', response);
};
</script>

<template>
  <el-upload
    action="#"
    :http-request="customRequest"
    :file-list="fileList"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const fileList = ref([]);

const customRequest = async (options) => {
  const { file, onProgress, onSuccess, onError } = options;
  
  const formData = new FormData();
  formData.append('file', file);
  
  try {
    const res = await axios.post('/api/upload', formData, {
      onUploadProgress: (progressEvent) => {
        const percent = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        onProgress({ percent });
      }
    });
    onSuccess(res.data);
  } catch (err) {
    onError(err);
  }
};
</script>

const handleSuccess = (response, file) => {
  file.url = response.url; // 假设服务器返回{url: '...'}
};

const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;
  
  if (!isImage) {
    ElMessage.error('只能上传图片!');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB!');
    return false;
  }
  return true;
};

:on-progress="handleProgress"

const handleProgress = (event, file, fileList) => {
  console.log('上传进度:', event.percent);
};