使用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>