使用uniapp拍照上传的实现

一、介绍

随着移动互联网的普及，手机成为了人们最主要的浏览终端。对于进行一些数据录入，例如头像、申请表等，拍照上传成为了一个非常实用的方式。本文将介绍如何使用uniapp实现拍照上传功能。

二、前置条件

为了实现拍照上传，我们需要拍照功能和上传功能的支持。在uniapp中，我们可以使用uni-ui提供的camera组件实现拍照功能，使用uni.request实现上传功能。同时，我们需要有一个后台服务器，用来存储上传的照片。

三、实现拍照功能

首先，在需要拍照上传的页面中引用uni-ui的camera组件。在template中加入以下代码：

<template>
  <view>
    <camera style="width: 100%; height: 400rpx;" device-position="front"
      bind:stop="onCameraStop" wx:if="{{ cameraAuthorized }}" />
    <view class="container" wx:else>
      <button type="primary" size="default" bind:tap="openSetting">打开相机权限</button>
    </view>
  </view>
</template>

<script>
  import uniPermissions from '@/common/uni-permissions.js' // 引入uni-permissions.js
  import uniPopup from '@/common/uni-popup.js' // 引入uni-popup.js

  export default {
    data() {
      return {
        cameraAuthorized: true // 判断相机权限
      };
    },
    onLoad() {
      this.checkCameraAuthorize(); // onload时检查相机权限
    },
    methods: {
      openSetting() { // 用户点击打开相机权限的按钮
        uniPermissions.openSetting();
      },
      checkCameraAuthorize() { // 检查相机权限
        uniPermissions.checkAuthorize('camera', {
          onResult: res => {
            this.cameraAuthorized = res.authorized;
            if (!res.authorized) {
              uniPopup.showModal('提示', '相机权限未开启,是否前往权限设置?', () => {
                  uniPermissions.openSetting();
                }, () => {}, true);
            }
          }
        });
      },
      onCameraStop(e) {
        uni.saveFile({
          tempFilePath: e.tempImagePath,
          success: function (res) {
            uni.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            });
          },
          fail: function (res) {
             uni.showToast({
              title: '保存失败',
              icon: 'none',
              duration: 2000
            });
          }
        });
      }
    }
  };
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: {{ windowHeight - navigationBarHeight }}px;
    color: #8f8f94;
    background-color: #ffffff;
  }
</style>

在上面的代码中，我们使用了uniPermissions和uniPopup两个自定义组件。这两个组件的使用方法可以在github找到。

四、实现上传功能

在实现上传功能之前，我们需要定义一个后台接口，用来接收上传的文件，将其存储到服务器上，并返回文件的url。在后台接口定义好之后，我们再来实现上传功能。

我们使用uni.request方法来上传文件。在点击上传按钮之后，调用以下代码：

<button type="primary" bind:tap="onUploadClick">上传</button>

<script>
  export default {
    methods: {
      onUploadClick() {
        uni.chooseImage({
          success: (res) => {
            uni.showLoading({
              title: '上传中...'
            });

            let filePath = res.tempFilePaths[0];
            uni.uploadFile({
              url: '后台接口url',
              filePath: filePath,
              name: 'file',
              success: (res) => {
                uni.hideLoading();
                uni.showToast({
                  title: '上传成功',
                  icon: 'success',
                  duration: 2000
                });
              },
              fail: (res) => {
                uni.hideLoading();
                uni.showToast({
                  title: '上传失败',
                  icon: 'none',
                  duration: 2000
                });
              }
            });
          }
        });
      }
    }
  };
</script>

五、完整代码示例

下面是拍照上传的完整代码示例：

<template>
  <view>
    <camera style="width: 100%; height: 400rpx;" device-position="front"
      bind:stop="onCameraStop" wx:if="{{ cameraAuthorized }}" />
    <view class="container" wx:else>
      <button type="primary" size="default" bind:tap="openSetting">打开相机权限</button>
    </view>
    <button type="primary" bind:tap="onUploadClick">上传</button>
  </view>
</template>

<script>
  import uniPermissions from '@/common/uni-permissions.js' // 引入uni-permissions.js
  import uniPopup from '@/common/uni-popup.js' // 引入uni-popup.js

  export default {
    data() {
      return {
        cameraAuthorized: true // 判断相机权限
      };
    },
    onLoad() {
      this.checkCameraAuthorize(); // onload时检查相机权限
    },
    methods: {
      openSetting() { // 用户点击打开相机权限的按钮
        uniPermissions.openSetting();
      },
      checkCameraAuthorize() { // 检查相机权限
        uniPermissions.checkAuthorize('camera', {
          onResult: res => {
            this.cameraAuthorized = res.authorized;
            if (!res.authorized) {
              uniPopup.showModal('提示', '相机权限未开启,是否前往权限设置?', () => {
                  uniPermissions.openSetting();
                }, () => {}, true);
            }
          }
        });
      },
      onCameraStop(e) {
        uni.saveFile({
          tempFilePath: e.tempImagePath,
          success: function (res) {
            uni.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            });
          },
          fail: function (res) {
             uni.showToast({
              title: '保存失败',
              icon: 'none',
              duration: 2000
            });
          }
        });
      },
      onUploadClick() {
        uni.chooseImage({
          success: (res) => {
            uni.showLoading({
              title: '上传中...'
            });

            let filePath = res.tempFilePaths[0];
            uni.uploadFile({
              url: '后台接口url',
              filePath: filePath,
              name: 'file',
              success: (res) => {
                uni.hideLoading();
                uni.showToast({
                  title: '上传成功',
                  icon: 'success',
                  duration: 2000
                });
              },
              fail: (res) => {
                uni.hideLoading();
                uni.showToast({
                  title: '上传失败',
                  icon: 'none',
                  duration: 2000
                });
              }
            });
          }
        });
      }
    }
  };
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: {{ windowHeight - navigationBarHeight }}px;
    color: #8f8f94;
    background-color: #ffffff;
  }
</style>