阿里云上传 注册-上传-一条龙
前沿
在进行文件上传功能前,我分析了一下腾阿里的文件存储服务功能,流程都基本类似都是申请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 ,看完不要和我说你还不会阿里云上传图片
分类:
vue
, Javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效