建设电子商务网站的方法有qt科技感ui界面

建设电子商务网站的方法有,qt科技感ui界面,网上课程网站建设方案,wordpress 媒体库分享1. 整体流程概述 前端使用阿里云OSS上传文件的完整流程如下#xff1a; 调用后端接口获取临时密钥使用临时密钥初始化OSS客户端调用OSS客户端上传文件获取上传成功后的文件URL 2. 后端接口调用#xff08;获取临时密钥#xff09; 2.1 接口信息 接口地址 #xff1a; /pc/f…1. 整体流程概述前端使用阿里云OSS上传文件的完整流程如下调用后端接口获取临时密钥使用临时密钥初始化OSS客户端调用OSS客户端上传文件获取上传成功后的文件URL2. 后端接口调用获取临时密钥2.1 接口信息接口地址 /pc/file/sts请求方式 GET返回格式 JSON2.2 返回参数说明{code:200,// 状态码0或200表示成功msg:操作成功,data:{accessKeyId:STS.NZQpZ...,// 临时AccessKeyIdaccessKeySecret:LJ8Z8...,// 临时AccessKeySecretsecurityToken: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/apiexportconstgetSTSTokenasync(){try{constresponseawaitapi.get(/pc/file/sts)if(response.code200){returnresponse.data}else{thrownewError(获取STS密钥失败: (response.msg||未知错误))}}catch(error){console.error(获取STS密钥失败:,error)throwerror}}3. OSS客户端初始化3.1 安装阿里云OSS SDKnpm install ali-oss3.2 初始化OSS客户端importOSSfromali-ossimport{getSTSToken}from./stsletclientnullexportconstinitOSSClientasync(){try{consttokenawaitgetSTSToken()// 解析region从endpoint中提取region部分letregiontoken.endpointif(token.endpointtoken.endpoint.includes(.)){constpartstoken.endpoint.split(.)if(parts.length3parts[0].startsWith(oss-)){regionparts[0]}else{regionparts[0]console.warn(非标准OSS endpoint格式:,region)}}// 存储bucketDomain以便上传时使用window.ossBucketDomaintoken.bucketDomain// 创建OSS客户端实例clientnewOSS({region:region,// 区域endpoint:token.endpoint,// 地域节点accessKeyId:token.accessKeyId,// 临时AccessKeyIdaccessKeySecret:token.accessKeySecret,// 临时AccessKeySecretstsToken:token.securityToken,// 临时安全令牌bucket:token.bucketName,// 存储空间名称// 配置自动刷新临时密钥refreshSTSToken:async(){constnewTokenawaitgetSTSToken()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 文件上传函数exportconstuploadFileToOSSasync(file,type,phone,name){try{// 确保OSS客户端已初始化if(!client){awaitinitOSSClient()}// 获取文件后缀constfileExtfile.name.substring(file.name.lastIndexOf(.))consttimestampDate.now()// 根据文件类型生成不同的路径和文件名letfilePathif(typefront||typeback){// 身份证照片 - /Doctor_ID/手机号_医生姓名_时间戳.图片后缀constfolder/Doctor_ID/filePath${folder}${phone}_${name}_${timestamp}${fileExt}}elseif(typemedicalFront||typemedicalBack){// 医师执业资格证照片 - /Doctor_PPC/手机号_医生姓名_时间戳.图片后缀constfolder/Doctor_PPC/filePath${folder}${phone}_${name}_${timestamp}${fileExt}}else{// 其他类型文件filePath${type}-${timestamp}-${Math.random().toString(36).substring(2,10)}${fileExt}}// 上传文件constresultawaitclient.put(filePath,file)// 返回文件URL - 优先使用bucketDomain构建URLletfileUrlresult.urlif(window.ossBucketDomainfilePath){// 移除filePath开头可能的斜杠constcleanFilePathfilePath.startsWith(/)?filePath.substring(1):filePath fileUrl${window.ossBucketDomain}/${cleanFilePath}}returnfileUrl}catch(error){console.error(OSS上传失败:,error)thrownewError(文件上传失败)}}4.2 调用上传函数// 在Vue组件中调用consthandleFileChangeasync(event,type){constfileevent.target.files[0]if(!file)returntry{// 显示上传中提示showToast({message:上传中...,duration:0})// 上传到OSS传递必要参数constimageUrlawaituploadFileToOSS(file,type,form.phone,form.name)// 存储图片URLif(typefront){form.frontIdCardimageUrl}elseif(typeback){form.backIdCardimageUrl}elseif(typemedicalFront){form.medicalFrontimageUrl}elseif(typemedicalBack){form.medicalBackimageUrl}showToast(图片上传成功)}catch(error){console.error(图片上传失败:,error)showToast(图片上传失败请稍后重试)// 清空文件输入event.target.value}}5. 文件命名规范5.1 身份证照片路径格式 /Doctor_ID/手机号_医生姓名_时间戳.图片后缀示例 /Doctor_ID/13800138000_张三_1734478800000.jpg5.2 医师执业资格证照片路径格式 /Doctor_PPC/手机号_医生姓名_时间戳.图片后缀示例 /Doctor_PPC/13800138000_张三_1734478800000.jpg6. 错误处理6.1 接口调用错误try{constresponseawaitapi.get(/pc/file/sts)// 处理响应}catch(error){console.error(获取STS密钥失败:,error)showToast(OSS初始化失败图片上传功能可能不可用)}6.2 文件上传错误try{constresultawaitclient.put(filePath,file)// 处理上传结果}catch(error){console.error(OSS上传失败:,error)showToast(文件上传失败请稍后重试)}7. 关键代码示例7.1 完整的OSS工具类src/utils/oss.jsimportOSSfromali-ossimportapifrom/utils/api// 全局OSS客户端实例letclientnull// 获取STS临时密钥exportconstgetSTSTokenasync(){try{constresponseawaitapi.get(/pc/file/sts)if(response.code0||response.code200){returnresponse.data}else{thrownewError(获取STS密钥失败: (response.msg||未知错误))}}catch(error){console.error(获取STS密钥失败:,error)throwerror}}// 初始化OSS客户端exportconstinitOSSClientasync(){try{consttokenawaitgetSTSToken()// 解析regionletregiontoken.endpointif(token.endpointtoken.endpoint.includes(.)){constpartstoken.endpoint.split(.)if(parts.length3parts[0].startsWith(oss-)){regionparts[0]}else{regionparts[0]console.warn(非标准OSS endpoint格式:,region)}}// 存储bucketDomainwindow.ossBucketDomaintoken.bucketDomain// 创建OSS客户端实例clientnewOSS({region:region,endpoint:token.endpoint,accessKeyId:token.accessKeyId,accessKeySecret:token.accessKeySecret,stsToken:token.securityToken,bucket:token.bucketName,refreshSTSToken:async(){constnewTokenawaitgetSTSToken()return{accessKeyId:newToken.accessKeyId,accessKeySecret:newToken.accessKeySecret,stsToken:newToken.securityToken}},refreshSTSTokenInterval:300000})returnclient}catch(error){console.error(OSS客户端初始化失败:,error)throwerror}}// 上传文件到OSSexportconstuploadFileToOSSasync(file,type,phone,name){try{if(!client){awaitinitOSSClient()}constfileExtfile.name.substring(file.name.lastIndexOf(.))consttimestampDate.now()letfilePathif(typefront||typeback){constfolder/Doctor_ID/filePath${folder}${phone}_${name}_${timestamp}${fileExt}}elseif(typemedicalFront||typemedicalBack){constfolder/Doctor_PPC/filePath${folder}${phone}_${name}_${timestamp}${fileExt}}else{filePath${type}-${timestamp}-${Math.random().toString(36).substring(2,10)}${fileExt}}constresultawaitclient.put(filePath,file)letfileUrlresult.urlif(window.ossBucketDomainfilePath){constcleanFilePathfilePath.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用于后续业务处理。