阿里云上传 注册-上传-一条龙

前沿

在进行文件上传功能前，我分析了一下腾阿里的文件存储服务功能，流程都基本类似都是申请XXX云账号，开通文件存储对象功能，对接sdk，开始编码等。

现在开始申请自己的账号：阿里云有免费3个月 的试用期

哈哈哈 可以做做实验

下面图文说明：

 申请你的对象存储OSS

 

创建你的桶名： Bucket

 选中上面的蓝色的标准

 创建你的文件夹 img

 

右上角的创建accesskey 管理

创建字的用户

 子用户 创建

 

 再添加一个权限

 创建你的Oss 策略

 

创建一个数据规则 

 如我这样创建

 再到概览那边拿到你的桶域名

 

 

 这样就可以了，

 

再你的页面路面

引入这个

 代码如下

 

import { Base64 } from './base64.js'
import { util } from './crypto.js'
import { HMAC } from './hmac.js'
import { SHA1 } from './sha1.js'

// 下面这3个信息必填
const url = 'https://yanfan001.oss-cn-hangzhou.aliyuncs.com' //'https://xxx.oss-cn-beijing.aliyuncs.com/'
const OSSAccessKeyId = 'LTAI5tRHQ3XTW23waBze12PT'
const OssAccesskeySercet= '0pOnUUivHGg3nwHfTiiyuItJdanYyk';


const policyText = {
  "expiration": "2034-01-01T12:00:00.000Z", // 设置Policy的有效期，格式为UTC时间。如果Policy失效，将无法上传文件。
  "conditions": [
  ["content-length-range", 0, 1048576000] // 限制上传文件的大小，单位为字节，此处限制文件大小为1 GB。如果上传的文件大小超过此限制，文件将无法上传到OSS。如果未设置该限制，则默认文件大小最大为5 GB。
  ]
}

const policy = Base64.encode(JSON.stringify(policyText))
const bytes = HMAC(SHA1, policy, OssAccesskeySercet, { asBytes: true })
const signature = util.bytesToBase64(bytes)

// 生成文件名随机字符串
function random_string(len) {
　　const strLeng = len || 32;
　　const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';   
　　const maxPos = chars.length;
　　let pwd = '';
　　for (let i = 0; i < strLeng; i++) {
    　　pwd += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}

// 获取文件后缀
function get_suffix(filename) {
    const pos = filename.lastIndexOf('.')
    let suffix = ''
    if (pos != -1) {
        suffix = filename.substring(pos)
    }
    return suffix;
}

// dir格式：'img/'
export const ossUpload = (filePath, name, dir) => {
  const key = dir + random_string(10) + get_suffix(name);
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url,
      filePath,
      name: 'file',
      formData: {
        name,
        key,
        policy,
        OSSAccessKeyId,
        success_action_status: '200',
        signature
      },
      success: (res) => {
        console.log(res);
        resolve({success: true, data: url+ '/' + key})
      },
      fail: () => {
        reject({success: false, data: '上传失败'})
      }
    })
  })
} 

 

在你的页面引入

import { ossUpload } from '@/js_sdk/jason-alioss-upload/oss.js'

 <template>
  <view>
    <button @tap="chooseImg">上传文件</button>
    <image :src="headImage" />
  </view>
</template>

<script>
import { ossUpload } from '@/js_sdk/jason-alioss-upload/oss.js'

export default {
    data() {
        return {
            headImage: ''
        }
    },
    methods: {
        chooseImg() {
            uni.chooseImage({
                count: 1,
                success: async (file) => {
                  const {success,data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'img/')
                  if(success) {
                    this.headImage = data
                  } else {
                    uni.showToast({icon:'none', title: data})
                  }
                }
            })
        }
    }
}
</script>

然后在你的阿里云后台管理系统可以看到

 

 

OK ，看完不要和我说你还不会阿里云上传图片