<template>
  <el-upload
    action="/api/upload"  // 上傳地址
    list-type="picture-card"  // 顯示為圖片卡片
    :on-preview="handlePreview"  // 點(diǎn)擊已上傳文件時(shí)的回調(diào)
    :on-remove="handleRemove"  // 移除文件時(shí)的回調(diào)
    :on-success="handleSuccess"  // 上傳成功回調(diào)
    :on-error="handleError"  // 上傳失敗回調(diào)
    :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('預(yù)覽文件:', 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('預(yù)覽:', 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">點(diǎn)擊上傳</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; // 假設(shè)服務(wù)器返回{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('上傳進(jìn)度:', event.percent);
};