uniapp 阿里云 oss 上传文件/图片

移动开发 2022-03-23 11:59:48 阅读次数: 0

项目背景： uniapp  开发的 混合项目，包含 H5， ios，  android  三端开发；看了下 本身 alioss  是有提供 JS SDK，但是考虑到兼容问题，所以采用了 PostObject 方式，来上传 aliyunoss , 官方的文档：PostObject - 对象存储 OSS - 阿里云https://help.aliyun.com/document_detail/31988.html

大体流程：

  1. 向自己的服务器  请求操作  阿里云OSS token 权限
  2. 将文件上传至 阿里云OSS ，这里有个小插曲 ，分了两只情况：等下在后面具体分析两种情况 
    1，使用 uniapp 的  uni.chooseImage 选择图片/或者拍照,拿到的文件

2，是用 H5 input 方式拿到的 图片信息
  3. 将拿到上传成功的文件信息 通知到 自己的服务器，

uniapp 通过 input 选择的文件 处理：

 在这里通过  event.path[0].files[0]  拿到文件具体信息：

input.onchange = async(event) => {
  // console.log('event------------->', event)
  // console.log('event------------->', event.target)
  const tempSize = event.path[0].files[0].size
  const size = tempSize / 1024 / 1024
  if (size > 5) {
    uni.showModal({
      content: 'Please upload a file no more than 5M!',
      confirmText: 'Confirm',
      showCancel: false
    })
    return
  }

  const resoult = await aliOssHelper.aliOssUploadH5({
    file: event.path[0].files[0]
  })
  if (resoult.code === 200) {
    this.$emit('fileUploadInfo', resoult)
  }
}

核心的处理函数，将图片 转成 base64,直接 扔给  uni.uploadFile

  async upLoadFileH5(option) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(option.file)
      reader.onload = (date) => {
        const fileInfo = this.fileNameByfile(option.file)
        const resoult = {
          sucess: false,
          filePath: fileInfo.path,
          name: fileInfo.name,
          url: `${store.state.aliOssToken.domain}${fileInfo.path}`
        }
        uni.uploadFile({
          url: `https://${store.state.aliOssToken.bucketName}.${store.state.aliOssToken.endPoint}`,
          // url: 'https://test-gbm001-oss.oss-cn-hangzhou.aliyuncs.com',
          filePath: date.target.result,
          fileType: option.file.type,
          name: 'file',
          formData: {
            key: fileInfo.path,
            policy: store.state.aliOssToken.encodedPolicy,
            OSSAccessKeyId: store.state.aliOssToken.accessKeyId,
            success_action_status: '200', // 让服务端返回200,不然，默认会返回204
            signature: store.state.aliOssToken.signature
          },
          success: res => {
            if (res.statusCode === 200) {
              console.log('oss upload success 200:', res)
              resoult.sucess = true
              resolve(resoult)
            } else {
              resoult.message = res.errMsg
              console.log('oss upload fail !200:', res)
              resoult.sucess = false
              reject(resoult)
            }
          },
          fail: err => {
            console.log('err:', err)
            resoult.sucess = false
            reject(resoult)
          }
        })
      }
    })

uniapp 通过 uni.chooseImage 选择的图片处理：

 async upLoadFileUni(option) {
    // console.log("option:", option)
    return new Promise((resolve, reject) => {
      const fileInfo = this.fileNameByBlob(option)
      // console.log('fileInfo>>>>>:', fileInfo)
      const resoult = {
        sucess: false,
        message: '',
        filePath: fileInfo.path,
        name: fileInfo.name,
        url: `${store.state.aliOssToken.domain}${fileInfo.path}`
      }
      // console.log('resoult>>>>>:', resoult)
      uni.uploadFile({
        url: `https://${store.state.aliOssToken.bucketName}.${store.state.aliOssToken.endPoint}`,
        filePath: option.file,
        // fileType: option.type,
        name: 'file',
        formData: {
          key: fileInfo.path,
          policy: store.state.aliOssToken.encodedPolicy,
          OSSAccessKeyId: store.state.aliOssToken.accessKeyId,
          success_action_status: '200', // 让服务端返回200,不然，默认会返回204
          signature: store.state.aliOssToken.signature
        },
        success: res => {
          if (res.statusCode === 200) {
            console.log('oss upload success 200:', res)
            resoult.sucess = true
            resolve(resoult)
          } else {
            resoult.message = res.errMsg
            console.log('oss upload fail !200:', res)
            resoult.sucess = false
            reject(resoult)
          }
        },
        fail: err => {
          console.log('err:', err)
          resoult.sucess = false
          reject(resoult)
        }
      })
    })
  },

完整的脚本  aliOssHelper.js

//羡慕封装的 http请求函数
import {
  flyio
} from '@/utils/api/config.js'
//保存 服务端传来的 alioss 权限数据
import store from '@/store/index'
//自己分装的 时间格式化
import time from '@/common/time.js'
export default {
  async aliOssUploadH5(option) {
    await this.aliOssTokeCheck()
    const resoult = await this.upLoadFileH5(option)
    if (resoult.sucess) {
      return await this.syncToServer(resoult)
    } else {
      uni.showToast({
        title: 'upLoad to server fail',
        icon: 'none'
      })
    }
  },
  async aliOssUploadUni(option) {
    await this.aliOssTokeCheck()
    const resoult = await this.upLoadFileUni(option)
    if (resoult.sucess) {
      return await this.syncToServer(resoult)
    } else {
      uni.showToast({
        title: 'upLoad to server fail',
        icon: 'none'
      })
    }
  },
  async upLoadFileUni(option) {
    // console.log("option:", option)
    return new Promise((resolve, reject) => {
      const fileInfo = this.fileNameByBlob(option)
      // console.log('fileInfo>>>>>:', fileInfo)
      const resoult = {
        sucess: false,
        message: '',
        filePath: fileInfo.path,
        name: fileInfo.name,
        url: `${store.state.aliOssToken.domain}${fileInfo.path}`
      }
      // console.log('resoult>>>>>:', resoult)
      uni.uploadFile({
        url: `https://${store.state.aliOssToken.bucketName}.${store.state.aliOssToken.endPoint}`,
        filePath: option.file,
        // fileType: option.type,
        name: 'file',
        formData: {
          key: fileInfo.path,
          policy: store.state.aliOssToken.encodedPolicy,
          OSSAccessKeyId: store.state.aliOssToken.accessKeyId,
          success_action_status: '200', // 让服务端返回200,不然，默认会返回204
          signature: store.state.aliOssToken.signature
        },
        success: res => {
          if (res.statusCode === 200) {
            console.log('oss upload success 200:', res)
            resoult.sucess = true
            resolve(resoult)
          } else {
            resoult.message = res.errMsg
            console.log('oss upload fail !200:', res)
            resoult.sucess = false
            reject(resoult)
          }
        },
        fail: err => {
          console.log('err:', err)
          resoult.sucess = false
          reject(resoult)
        }
      })
    })
  },
  async upLoadFileH5(option) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(option.file)
      reader.onload = (date) => {
        const fileInfo = this.fileNameByfile(option.file)
        const resoult = {
          sucess: false,
          filePath: fileInfo.path,
          name: fileInfo.name,
          url: `${store.state.aliOssToken.domain}${fileInfo.path}`
        }
        uni.uploadFile({
          url: `https://${store.state.aliOssToken.bucketName}.${store.state.aliOssToken.endPoint}`,
          // url: 'https://test-gbm001-oss.oss-cn-hangzhou.aliyuncs.com',
          filePath: date.target.result,
          fileType: option.file.type,
          name: 'file',
          formData: {
            key: fileInfo.path,
            policy: store.state.aliOssToken.encodedPolicy,
            OSSAccessKeyId: store.state.aliOssToken.accessKeyId,
            success_action_status: '200', // 让服务端返回200,不然，默认会返回204
            signature: store.state.aliOssToken.signature
          },
          success: res => {
            if (res.statusCode === 200) {
              console.log('oss upload success 200:', res)
              resoult.sucess = true
              resolve(resoult)
            } else {
              resoult.message = res.errMsg
              console.log('oss upload fail !200:', res)
              resoult.sucess = false
              reject(resoult)
            }
          },
          fail: err => {
            console.log('err:', err)
            resoult.sucess = false
            reject(resoult)
          }
        })
      }
    })
  },
  async aliOssTokeCheck() {
    if (store.state.aliOssToken) {
      const expireTimes = store.state.aliOssToken.expire
      const localTime = (new Date()).getTime() / 1000 + 60 * 10
      // token 过期
      if (localTime > expireTimes) {
        console.warn('oss token expire...  get new one')
        await this.aliOssTokenRequest()
      }
    } else {
      await this.aliOssTokenRequest()
    }
  },
  async aliOssTokenRequest() {
    const resoult = await flyio.get('file/oss/generatePolicySignature')
    if (resoult && resoult.code === 200 && resoult.success === true && resoult.data) {
      store.commit('updateOssAliToken', resoult.data)
      console.warn('aliOssToken scuess ')
    } else {
      console.warn('aliOssToken fail :', resoult)
      uni.showToast({
        title: 'oss token fail',
        icon: 'none'
      })
    }
  },
  async syncToServer(ossInfo) {
    const resoult = await flyio.post('file/saveFileInfo', {
      url: ossInfo.url,
      fileName: ossInfo.name
    })
    if (resoult && resoult.code === 200 && resoult.success === true && resoult.data) {
      resoult.data.originName = ossInfo.name
      resoult.data.url = ossInfo.url
      return resoult
    } else {
      uni.showToast({
        title: 'sync to server fail',
        icon: 'none'
      })
    }
  },
  fileNameByfile(file) {
    const index = file.name.lastIndexOf('.')
    const extension = file.name.substr(index)
    const fileName = `${this.uuid(16, 16)}${extension}`
    return {
      path: `gbm/${time.formatTime(new Date(), 'yyyy/MM/dd')}/${fileName}`.toLowerCase(),
      name: fileName.toLowerCase()
    }
  },
  fileNameByBlob(option) {
    const extension = option.type
    const fileName = `${this.uuid(16, 16)}.${extension}`
    return {
      path: `gbm/${time.formatTime(new Date(), 'yyyy/MM/dd')}/${fileName}`.toLowerCase(),
      name: fileName.toLowerCase()
    }
  },
  uuid(len, radix) {
    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
    const uuid = []
    let i
    radix = radix || chars.length
    if (len) {
      for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
    } else {
      let r
      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
      uuid[14] = '4'
      // Fill in random data.  At i==19 set the high bits of clock sequence as
      // per rfc4122, sec. 4.1.5
      for (i = 0; i < 36; i++) {
        if (!uuid[i]) {
          r = 0 | Math.random() * 16
          uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]
        }
      }
    }
    return uuid.join('')
  }
}

猜你喜欢

转载自blog.csdn.net/nicepainkiller/article/details/122533019
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022