在之前的开发当中都是后台处理上传前端负责上传接口调用涉及到直传到阿里云对象存储服务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跨域配置
在之前的开发当中都是后台处理上传前端负责上传接口调用涉及到直传到阿里云对象存储服务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跨域配置
)
)
