vue 前端oss直传
第一种方法
最简单的方法就是引入一个ali-oss的npm包
npm install ali-oss
具体代码如下：
import OSS from 'ali-oss'export async function readAsDataURL (file) {return new Promise((resolve) => {var reader = new FileReader()reader.readAsDataURL(file)reader.onload = () => {resolve(reader.result)}})}/*** oss文件存储*/export async function ossUpload (file) {if (!(file instanceof File)) {throw new Error('file 类型错误')}// const pic = await readAsDataURL(file) 这部分是将文件转成字符串const fileName = file.name.split('.')[0]const fileSuffix = '.' + file.type.split('/')[1]// 获取 oss tokenconst tokenInfo = await getOssStorageInfo({fileEncrypt: true,fileSuffix: fileSuffix,originFileName: fileName})// 传到阿里云上数据const client = new OSS({accessKeyId: tokenInfo.ossToken.accessKeyId,accessKeySecret: tokenInfo.ossToken.accessKeySecret,stsToken: tokenInfo.ossToken.securityToken,bucket: tokenInfo.ossToken.bucket,region: 'oss-cn-shanghai'})// 传字符串文本 这部分是数据加解密的不能传图片的文件流 简单的将图片base64传到阿里云上面的字符串 如果普普通通的直接用文件流就行// const splicePic = base64ToSplice(pic)// var Buffer = OSS.Buffer// new Buffer(splicePic)// tokenInfo.fileLocation 就是名字 /* * @param {String} name the object key * @param {Mixed} file String(file path)/Buffer/ReadableStream */try {const ossRes = await client.put(tokenInfo.fileLocation, file)if (ossRes.res.status === 200) {return tokenInfo.fileId} else {console.error('oss上传失败')}} catch (e) {console.log('%c 🍠 e: ', 'font-size:20px;background-color: #2EAFB0;color:#fff;', e)}}
之后就可以直接拿 ossUpload方法来获取到fileId提交给后端就行了。
第二种方法
获取后端签名 就是服务端签名后直传
这种方法就要麻烦你们的后端了。
具体方法就看看阿里云的官网吧
/document_detail/31926.html
如果觉得《前端oss直传》对你有帮助，请点赞、收藏，并留下你的观点哦！
