UNIAPP 实现的复杂功能：拍照和上传图片到服务器

在许多移动应用中，拍照并上传图片是一项常见的需求，例如用户头像上传、商品图片上传等。本文将介绍如何在 UNIAPP 中实现拍照和上传图片到服务器的功能。该功能涉及到调用设备的摄像头、选择图片、上传图片文件到服务器并显示上传的结果。

功能描述

该功能将允许用户：

1. 使用设备摄像头拍照并选择图片。
2. 将选择的图片通过文件上传功能上传至服务器。
3. 上传图片后，展示图片上传的状态和上传后的图片链接。

功能要求

1. 选择图片或拍照：允许用户通过摄像头拍照或从相册中选择图片。
2. 上传图片：将选择的图片上传到服务器，支持发送文件和额外的表单数据。
3. 展示图片：上传成功后，展示图片或图片链接。
4. 错误处理：如果上传失败，展示相应的错误信息。

技术栈

1. 拍照与选择图片：使用 uni.chooseImage API 选择图片，支持从相册或拍照。
2. 上传文件：使用 uni.uploadFile API 将选择的图片上传到服务器。
3. 展示图片：上传成功后，展示图片链接或展示图片。

1. 前端代码实现

页面实现

<!-- pages/upload/upload.vue -->
<template>
  <view class="container">
    <view class="header">UNIAPP 图片上传功能</view>

    <!-- 显示选中的图片 -->
    <view class="image-preview">
      <image :src="imageUrl" v-if="imageUrl" class="image-uploaded" />
      <text v-if="!imageUrl">暂无图片</text>
    </view>

    <!-- 上传图片按钮 -->
    <button @click="chooseImage" class="upload-button">选择图片</button>

    <!-- 上传进度条 -->
    <view v-if="isUploading" class="uploading-info">