lift-drawing-wechat/components/UploadFile/example.vue

<template>
  <view class="upload-example">
    <text class="title">文件上传示例</text>

    <!-- 图片上传 -->
    <view class="upload-section">
      <text class="section-title">图片上传</text>
      <UploadFile
        ref="imageUploadRef"
        :accept="'.jpg,.jpeg,.png,.gif'"
        :maxSize="5"
        @onSuccess="handleImageUploadSuccess"
        @onError="handleUploadError"
        @onProgress="handleUploadProgress"
      />
    </view>

    <!-- 视频上传 -->
    <view class="upload-section">
      <text class="section-title">视频上传</text>
      <UploadFile
        ref="videoUploadRef"
        :accept="'.mp4,.avi,.mov'"
        :maxSize="50"
        @onSuccess="handleVideoUploadSuccess"
        @onError="handleUploadError"
        @onProgress="handleUploadProgress"
      />
    </view>

    <!-- 文档上传 -->
    <view class="upload-section">
      <text class="section-title">文档上传</text>
      <UploadFile
        ref="fileUploadRef"
        :accept="'.pdf,.doc,.docx,.txt'"
        :maxSize="10"
        @onSuccess="handleFileUploadSuccess"
        @onError="handleUploadError"
        @onProgress="handleUploadProgress"
      />
    </view>

    <!-- 显示上传结果 -->
    <view v-if="uploadResult" class="result">
      <text class="result-title">{{ uploadResult.type }}上传成功！</text>
      <text class="result-info">文件名: {{ uploadResult.fileInfo.name }}</text>
      <text class="result-info">文件大小: {{ uploadResult.fileInfo.size }} 字节</text>
      <text class="result-info">
        服务器响应: {{ JSON.stringify(uploadResult.response) }}
      </text>
    </view>

    <!-- 重置按钮 -->
    <button @click="resetAllUploads" class="reset-btn">重置所有</button>
  </view>
</template>

<script setup>
import { ref } from "vue";
import UploadFile from "./UploadFile.vue";

// 响应式数据
const uploadResult = ref(null);
const imageUploadRef = ref(null);
const videoUploadRef = ref(null);
const fileUploadRef = ref(null);

// 处理图片上传成功
const handleImageUploadSuccess = (result) => {
  console.log("图片上传成功:", result);
  uploadResult.value = { ...result, type: '图片' };
  
  uni.showToast({
    title: "图片上传成功",
    icon: "success",
  });
};

// 处理视频上传成功
const handleVideoUploadSuccess = (result) => {
  console.log("视频上传成功:", result);
  uploadResult.value = { ...result, type: '视频' };
  
  uni.showToast({
    title: "视频上传成功",
    icon: "success",
  });
};

// 处理文档上传成功
const handleFileUploadSuccess = (result) => {
  console.log("文档上传成功:", result);
  uploadResult.value = { ...result, type: '文档' };
  
  uni.showToast({
    title: "文档上传成功",
    icon: "success",
  });
};

// 处理上传错误
const handleUploadError = (error) => {
  console.error("上传失败:", error);

  uni.showToast({
    title: "上传失败",
    icon: "error",
  });
};

// 处理上传进度
const handleUploadProgress = (progress) => {
  console.log("上传进度:", progress + "%");
};

// 重置所有上传组件
const resetAllUploads = () => {
  uploadResult.value = null;
  imageUploadRef.value?.reset();
  videoUploadRef.value?.reset();
  fileUploadRef.value?.reset();
};
</script>

<style scoped>
.upload-example {
  padding: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  display: block;
}

.result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 8px;
}

.result-title {
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
  display: block;
  margin-bottom: 10px;
}

.result-info {
  font-size: 14px;
  color: #606266;
  display: block;
  margin-bottom: 5px;
}

.reset-btn {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.reset-btn:hover {
  background-color: #337ecc;
}

.upload-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fafafa;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  display: block;
  margin-bottom: 15px;
}
</style>
</template>