当前位置：首页 > news >正文

前端vue3调取阿里的oss存储

news 2026/5/11 20:57:34

1. 整体流程概述

前端使用阿里云OSS上传文件的完整流程如下：

调用后端接口获取临时密钥
使用临时密钥初始化OSS客户端
调用OSS客户端上传文件
获取上传成功后的文件URL

2. 后端接口调用（获取临时密钥）

2.1 接口信息

接口地址： /pc/file/sts
请求方式：GET
返回格式：JSON

2.2 返回参数说明

{"code":200,// 状态码，0或200表示成功"msg":"操作成功","data":{"accessKeyId":"STS.NZQpZ...",// 临时AccessKeyId"accessKeySecret":"LJ8Z8...",// 临时AccessKeySecret"securityToken":"CAIS+...",// 临时安全令牌"endpoint":"oss-cn-hangzhou.aliyuncs.com",// OSS地域节点"bucketName":"rh-app-private",// OSS存储空间名称"bucketDomain":"https://rh-app-private.oss-cn-hangzhou.aliyuncs.com"// OSS存储空间域名}}

2.3 前端调用代码

importapifrom'@/utils/api'exportconstgetSTSToken=async()=>{try{constresponse=awaitapi.get('/pc/file/sts')if(response.code===200){returnresponse.data}else{thrownewError('获取STS密钥失败: '+(response.msg||'未知错误'))}}catch(error){console.error('获取STS密钥失败:',error)throwerror}}

3. OSS客户端初始化

3.1 安装阿里云OSS SDK

npm install ali-oss

3.2 初始化OSS客户端

importOSSfrom'ali-oss'import{getSTSToken}from'./sts'letclient=nullexportconstinitOSSClient=async()=>{try{consttoken=awaitgetSTSToken()// 解析region：从endpoint中提取region部分letregion=token.endpointif(token.endpoint&&token.endpoint.includes('.')){constparts=token.endpoint.split('.')if(parts.length>=3&&parts[0].startsWith('oss-')){region=parts[0]}else{region=parts[0]console.warn('非标准OSS endpoint格式:',region)}}// 存储bucketDomain以便上传时使用window.ossBucketDomain=token.bucketDomain// 创建OSS客户端实例client=newOSS({region:region,// 区域endpoint:token.endpoint,// 地域节点accessKeyId:token.accessKeyId,// 临时AccessKeyIdaccessKeySecret:token.accessKeySecret,// 临时AccessKeySecretstsToken:token.securityToken,// 临时安全令牌bucket:token.bucketName,// 存储空间名称// 配置自动刷新临时密钥refreshSTSToken:async()=>{constnewToken=awaitgetSTSToken()return{accessKeyId:newToken.accessKeyId,accessKeySecret:newToken.accessKeySecret,stsToken:newToken.securityToken}},// 刷新间隔：5分钟refreshSTSTokenInterval:300000})console.log('OSS客户端初始化成功')returnclient}catch(error){console.error('OSS客户端初始化失败:',error)throwerror}}

4. 文件上传实现

4.1 文件上传函数

exportconstuploadFileToOSS=async(file,type,phone,name)=>{try{// 确保OSS客户端已初始化if(!client){awaitinitOSSClient()}// 获取文件后缀constfileExt=file.name.substring(file.name.lastIndexOf('.'))consttimestamp=Date.now()// 根据文件类型生成不同的路径和文件名letfilePathif(type==='front'||type==='back'){// 身份证照片 - /Doctor_ID/手机号_医生姓名_时间戳.图片后缀constfolder='/Doctor_ID/'filePath=`${folder}${phone}_${name}_${timestamp}${fileExt}`}elseif(type==='medicalFront'||type==='medicalBack'){// 医师执业资格证照片 - /Doctor_PPC/手机号_医生姓名_时间戳.图片后缀constfolder='/Doctor_PPC/'filePath=`${folder}${phone}_${name}_${timestamp}${fileExt}`}else{// 其他类型文件filePath=`${type}-${timestamp}-${Math.random().toString(36).substring(2,10)}${fileExt}`}// 上传文件constresult=awaitclient.put(filePath,file)// 返回文件URL - 优先使用bucketDomain构建URLletfileUrl=result.urlif(window.ossBucketDomain&&filePath){// 移除filePath开头可能的斜杠constcleanFilePath=filePath.startsWith('/')?filePath.substring(1):filePath fileUrl=`${window.ossBucketDomain}/${cleanFilePath}`}returnfileUrl}catch(error){console.error('OSS上传失败:',error)thrownewError('文件上传失败')}}

4.2 调用上传函数

// 在Vue组件中调用consthandleFileChange=async(event,type)=>{constfile=event.target.files[0]if(!file)returntry{// 显示上传中提示showToast({message:'上传中...',duration:0})// 上传到OSS，传递必要参数constimageUrl=awaituploadFileToOSS(file,type,form.phone,form.name)// 存储图片URLif(type==='front'){form.frontIdCard=imageUrl}elseif(type==='back'){form.backIdCard=imageUrl}elseif(type==='medicalFront'){form.medicalFront=imageUrl}elseif(type==='medicalBack'){form.medicalBack=imageUrl}showToast('图片上传成功')}catch(error){console.error('图片上传失败:',error)showToast('图片上传失败，请稍后重试')// 清空文件输入event.target.value=''}}

5. 文件命名规范

5.1 身份证照片

路径格式： /Doctor_ID/手机号_医生姓名_时间戳.图片后缀
示例： /Doctor_ID/13800138000_张三_1734478800000.jpg

5.2 医师执业资格证照片

路径格式： /Doctor_PPC/手机号_医生姓名_时间戳.图片后缀
示例： /Doctor_PPC/13800138000_张三_1734478800000.jpg

6. 错误处理

6.1 接口调用错误

try{constresponse=awaitapi.get('/pc/file/sts')// 处理响应}catch(error){console.error('获取STS密钥失败:',error)showToast('OSS初始化失败，图片上传功能可能不可用')}

6.2 文件上传错误

try{constresult=awaitclient.put(filePath,file)// 处理上传结果}catch(error){console.error('OSS上传失败:',error)showToast('文件上传失败，请稍后重试')}

7. 关键代码示例

7.1 完整的OSS工具类（src/utils/oss.js）

importOSSfrom'ali-oss'importapifrom'@/utils/api'// 全局OSS客户端实例letclient=null// 获取STS临时密钥exportconstgetSTSToken=async()=>{try{constresponse=awaitapi.get('/pc/file/sts')if(response.code===0||response.code===200){returnresponse.data}else{thrownewError('获取STS密钥失败: '+(response.msg||'未知错误'))}}catch(error){console.error('获取STS密钥失败:',error)throwerror}}// 初始化OSS客户端exportconstinitOSSClient=async()=>{try{consttoken=awaitgetSTSToken()// 解析regionletregion=token.endpointif(token.endpoint&&token.endpoint.includes('.')){constparts=token.endpoint.split('.')if(parts.length>=3&&parts[0].startsWith('oss-')){region=parts[0]}else{region=parts[0]console.warn('非标准OSS endpoint格式:',region)}}// 存储bucketDomainwindow.ossBucketDomain=token.bucketDomain// 创建OSS客户端实例client=newOSS({region:region,endpoint:token.endpoint,accessKeyId:token.accessKeyId,accessKeySecret:token.accessKeySecret,stsToken:token.securityToken,bucket:token.bucketName,refreshSTSToken:async()=>{constnewToken=awaitgetSTSToken()return{accessKeyId:newToken.accessKeyId,accessKeySecret:newToken.accessKeySecret,stsToken:newToken.securityToken}},refreshSTSTokenInterval:300000})returnclient}catch(error){console.error('OSS客户端初始化失败:',error)throwerror}}// 上传文件到OSSexportconstuploadFileToOSS=async(file,type,phone,name)=>{try{if(!client){awaitinitOSSClient()}constfileExt=file.name.substring(file.name.lastIndexOf('.'))consttimestamp=Date.now()letfilePathif(type==='front'||type==='back'){constfolder='/Doctor_ID/'filePath=`${folder}${phone}_${name}_${timestamp}${fileExt}`}elseif(type==='medicalFront'||type==='medicalBack'){constfolder='/Doctor_PPC/'filePath=`${folder}${phone}_${name}_${timestamp}${fileExt}`}else{filePath=`${type}-${timestamp}-${Math.random().toString(36).substring(2,10)}${fileExt}`}constresult=awaitclient.put(filePath,file)letfileUrl=result.urlif(window.ossBucketDomain&&filePath){constcleanFilePath=filePath.startsWith('/')?filePath.substring(1):filePath fileUrl=`${window.ossBucketDomain}/${cleanFilePath}`}returnfileUrl}catch(error){console.error('OSS上传失败:',error)thrownewError('文件上传失败')}}

8. 注意事项

临时密钥有效期：临时密钥通常有一定的有效期（默认1小时），代码中配置了自动刷新机制
文件大小限制：建议在前端添加文件大小限制（如10MB），避免上传过大文件
错误处理：完善的错误处理可以提高用户体验
CORS配置：确保OSS存储空间已正确配置CORS规则，允许前端域名访问
网络稳定性：考虑添加重试机制，提高弱网络环境下的上传成功率
通过以上流程，前端可以安全、高效地将文件上传到阿里云OSS，并获取可用的文件URL用于后续业务处理。

查看全文

http://www.jsqmd.com/news/110555/