搞定微信小程序和uniapp的头像上传至阿里云OSS的保姆级操作指南

前端

2023-01-03 00:58:31

如何无缝上传头像到阿里云 OSS，提升用户体验

在当今社交媒体和在线交流盛行的时代，用户头像已成为用户在线身份的标志。为了提供无缝的用户体验，将头像安全、快速地上传到云存储至关重要。本文将深入探讨如何将头像从微信小程序或 Uniapp 轻松上传到阿里云 OSS。

步骤 1：创建阿里云 OSS 存储桶

阿里云 OSS 是阿里巴巴云提供的强大云存储服务。在上传头像之前，你需要创建一个 OSS 存储桶。登录阿里云控制台，导航到 "OSS" 选项卡，然后单击 "创建存储空间"。输入存储空间名称、区域并单击 "确定"。

步骤 2：配置微信小程序或 Uniapp

微信小程序

在微信小程序开发工具中，在 "app.js" 文件中添加以下代码：

import OSS from 'ali-oss';

const client = new OSS({
  region: '你的存储空间区域',
  accessKeyId: '你的访问密钥ID',
  accessKeySecret: '你的访问密钥密匙'
});

wx.onUploadFile({
  url: 'https://你的存储空间名称.oss-cn-你的存储空间区域.aliyuncs.com',
  filePath: '你的头像文件路径',
  name: '你的头像文件名称',
  header: {
    'Content-Type': 'image/jpeg'
  },
  success: (res) => {
    // 头像上传成功，将 URL 保存到数据库
  },
  fail: (err) => {
    // 头像上传失败，处理错误
  }
});

Uniapp

在 Uniapp 开发工具中，在 "manifest.json" 文件中添加以下代码：

{
  "networkTimeout": {
    "request": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  }
}

在 "pages.json" 文件中添加以下代码：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ]
}

在 "pages/index/index.vue" 文件中添加以下代码：

<template>
  <view>
    <button @click="uploadAvatar">上传头像</button>
  </view>
</template>

<script>
import OSS from 'ali-oss';

export default {
  data() {
    return {
      client: null
    };
  },
  methods: {
    uploadAvatar() {
      this.client = new OSS({
        region: '你的存储空间区域',
        accessKeyId: '你的访问密钥ID',
        accessKeySecret: '你的访问密钥密匙'
      });

      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.client.put(res.tempFilePaths[0], res.tempFilePaths[0])
            .then((res) => {
              // 头像上传成功，将 URL 保存到数据库
            })
            .catch((err) => {
              // 头像上传失败，处理错误
            });
        },
        fail: (err) => {
          // 头像选择失败，处理错误
        }
      });
    }
  }
};
</script>