每个人都可以，
拥有SSL证书

详细解析Uniapp中图片上传组件的完整实现方案，涵盖图片选择（相机/相册）、实时预览、文件上传API调用及状态管理。

组件集成删除功能、错误处理与自动清除机制，可直接复用到移动端项目，大幅提升开发效率和用户体验。

在Uniapp开发中，图片上传是常见的功能需求。如何实现一个完整的图片上传组件，包含图片选择、预览和上传功能，并提供完整的代码实现和交互设计。

组件功能概述

该图片上传组件实现了以下核心功能：

1. 图片选择：支持从相册和相机选择图片
2. 图片预览：显示已选择的图片
3. 上传功能：将图片上传到指定服务器
4. 状态提示：显示各种操作状态
5. 删除功能：可删除已选择的图片

完整代码实现

<template>
  <view class="container">
    <!-- 图片预览区域 -->
    <view class="preview-area" v-if="imageUrl">
      <image class="preview-image" :src="imageUrl" mode="aspectFit"></image>
      <view class="preview-actions">
        <button class="action-btn" @click="removeImage">删除</button>
        <button class="action-btn primary" @click="uploadImage">上传</button>
      </view>
    </view>
    
    <!-- 上传按钮区域 -->
    <view class="upload-area" @click="chooseImage" v-else>
      <uni-icons type="plusempty" size="30" color="#999"></uni-icons>
      <text class="upload-text">点击选择图片</text>
    </view>
    
    <!-- 上传状态提示 -->
    <view class="status-message" :class="statusClass">{{statusMessage}}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',       // 图片临时路径
      statusMessage: '',  // 状态提示信息
      statusClass: ''     // 状态样式类
    }
  },
  methods: {
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],  // 压缩图
        sourceType: ['album', 'camera'],  // 相册和相机
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0]
          this.showStatus('已选择图片，准备上传', 'info')
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
          this.showStatus('选择图片失败', 'error')
        }
      })
    },
    
    // 上传图片
    uploadImage() {
      if (!this.imageUrl) {
        this.showStatus('请先选择图片', 'warning')
        return
      }
      
      this.showStatus('上传中...', 'loading')
      
      uni.uploadFile({
        url: 'https://your-server.com/api/upload',  // 替换为你的上传接口
        filePath: this.imageUrl,
        name: 'file',
        formData: {
          'userId': '123'  // 可添加其他表单数据
        },
        success: (res) => {
          const data = JSON.parse(res.data)
          if (data.code === 200) {
            this.showStatus('上传成功', 'success')
            // 这里可以处理上传成功后的逻辑，如保存返回的图片URL
          } else {
            this.showStatus(data.msg || '上传失败', 'error')
          }
        },
        fail: (err) => {
          console.error('上传失败:', err)
          this.showStatus('上传失败', 'error')
        }
      })
    },
    
    // 删除图片
    removeImage() {
      this.imageUrl = ''
      this.showStatus('已删除图片', 'info')
    },
    
    // 显示状态信息
    showStatus(message, type) {
      this.statusMessage = message
      this.statusClass = type
      // 3秒后自动清除状态
      if (type !== 'loading') {
        setTimeout(() => {
          this.statusMessage = ''
          this.statusClass = ''
        }, 3000)
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preview-area {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-image {
  width: 100%;
  height: 300px;
  background-color: #f5f5f5;
}

.preview-actions {
  display: flex;
  padding: 10px;
  background-color: #fff;
  
  .action-btn {
    flex: 1;
    margin: 0 5px;
    font-size: 14px;
    
    &.primary {
      background-color: #2979ff;
      color: #fff;
    }
  }
}

.upload-area {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed #ccc;
  border-radius: 8px;
  background-color: #fafafa;
  color: #999;
  
  .upload-text {
    margin-top: 10px;
    font-size: 14px;
  }
}

.status-message {
  margin-top: 15px;
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 14px;
  
  &.info {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  
  &.success {
    background-color: #f6ffed;
    color: #52c41a;
  }
  
  &.warning {
    background-color: #fffbe6;
    color: #faad14;
  }
  
  &.error {
    background-color: #fff2f0;
    color: #f5222d;
  }
  
  &.loading {
    background-color: #fafafa;
    color: #666;
  }
}
</style>

核心API说明

uni.chooseImage

uni.uploadFile

使用说明

1. 将代码保存为pages/upload/upload.vue文件
2. 替换uploadImage方法中的url为你的实际上传接口
3. 可根据需要修改formData添加其他表单数据
4. 样式可根据项目需求调整

来此加密支持通配符证书申请，一张证书即可保护主域名及其所有子域名。无论是多级业务系统，还是微服务架构，都能通过通配符证书实现统一管理，大幅降低证书数量与维护成本。