vue文件上传至阿里云 ali-oss-北京尧图网络

在之前的开发当中都是后台处理上传前端负责上传接口调用涉及到直传到阿里云对象存储服务oss查阅了相关资料借鉴相关的文章然后做了一些调整分享出来希望能帮助到遇到这个需求的小伙伴下面是具体的步骤。使用oss1.使用 NPM 安装ali-ossnpm install ali-oss2.写一个公用的ali-oss.js// 引入ali-oss let OSS require(ali-oss) /** * [accessKeyId] {String}通过阿里云控制台创建的AccessKey。 * [accessKeySecret] {String}通过阿里云控制台创建的AccessSecret。 * [bucket] {String}通过控制台或PutBucket创建的bucket。 * [region] {String}bucket所在的区域默认oss-cn-hangzhou。 */ let client new OSS({ region: oss region, secure: true, // secure: 配合region使用如果指定了secure为true则使用HTTPS访问 accessKeyId: Your accessKeyId, accessKeySecret: Your accessKeySecret, bucket: Your bucket name })官网方法示例点这里3.调用/** * 上传文件大小不能超过5GB * param {string} ObjName OSS的储存路径和文件名字 * param {string} fileUrl 本地文件 * retruns Promise */ export const put async (ObjName, fileUrl) { try { let result await client.put(${ObjName}, fileUrl) // ObjName为文件名字,可以只写名字就直接储存在 bucket 的根路径如需放在文件夹下面直接在文件名前面加上文件夹名称 return result } catch (e) { console.log(e) } } // 上传成功之后转换真实的地址 export const signatureUrl async (ObjName) { try { let result await client.signatureUrl(${ObjName}) return result } catch (e) { console.log(e) } }4.保证上传文件的唯一性随机生成文件名/** * 生成随机文件名称 * 规则八位随机字符加下划线连接时间戳 */ export const getFileNameUUID () { function rx() { return (((1 Math.random()) * 0x10000) | 0).toString(16).substring(1) } return ${new Date()}_${rx()}${rx()} }使用element的 upload 组件进行上传使用Element-UI的 Upload 组件的自定义方法http-request上传覆盖默认的。直接贴代码template div classhello el-upload classupload-demo action :http-requesthandleUpload :before-uploadbeforeUpload el-button sizesmall typeprimary点击上传/el-button /el-upload /div /template script import { put, signatureUrl, getFileNameUUID } from /utils/ali-oss export default { name: Upload, }, methods: { beforeUpload(file) { // 限制上传类型 const fileExtensions getFileName(file.name) .doc || getFileName(file.name) .docx || getFileName(file.name) .pdf //限制的上限为20M const max20M file.size / 1024 / 1024 20; if (!fileExtensions) { this.$message.error(上传文件类型只能是 .doc, .docx, .pdf 格式!); } if (!max20M) { this.$message.error(上传文件大小不能超过 20MB!); } return fileExtensions max20M; }, /** * 自定义上传方法 */ handleUpload(option) { // 获取文件的后缀名 let objName getFileNameUUID() var obj option.file.name var index obj.lastIndexOf(.); obj obj.substring(index,obj.length); // 生成的文件名保留文件后缀名进行拼接 let objName getFileNameUUID() getFileName(option.file.name) // 调用 ali-oss 中的方法,flieName是存放的文件夹名称可自己定义 put(flieName/${objName}, option.file).then(res { console.log(res) // 上传成功之后转换真实的地址 signatureUrl(flieName/${objName}).then(res { console.log(res) }) }) } } } /script最后提交到后台保存文件地址上传到阿里云OSS成功后会返回文件的地址提交给后台保存地址就可以了。如果遇到跨域问题请参考官网的配置oss跨域配置

vue文件上传至阿里云 ali-oss

相关推荐

基于微信小程序的投票系统设计(源码+文档+部署讲解等)

基于微信小程序的停车位租赁平台的设计与实现(源码+文档+部署讲解等)

秋叶ComfyUI整合包：一键部署本地AI视频生成，支持LTX-2.3模型

更多资讯

Oracle迁移KingbaseES实战指南与优化策略

iOS 自定义通知 UI：UNNotificationContentExtension 从配置到排错落地

基于Spring Boot的校园食堂订餐系统设计与实现：从毕业设计到二次开发

计算机处理器笔记指南：流水线、缓存与性能实测

电力系统潮流计算与开断分析：牛顿-拉夫逊法实践

MySQL外键约束报错分析与最佳实践

今日更新

GUI自动化测试中的ScreenLayout：从硬编码坐标到声明式画面地图

LLC谐振变换器12V25A 300W开关电源设计与调试全攻略

ESP32多应用Flash数据隔离：分区表与NVS namespace实战

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？