前端oss直传

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 token
  const 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提交给后端就行了。

第二种方法

获取后端签名 就是服务端签名后直传
这种方法就要麻烦你们的后端了。
具体方法就看看阿里云的官网吧

https://help.aliyun.com/document_detail/31926.html