上传文件到阿里云

1.引入阿里云

import OSS from 'ali-oss'

2.利用input的file属性选择上传的文件

const file = e.target.files[0]
e.target.value = ''

注:选择文件时使用accept属性会导致一部分手机无法正常的上传文件,可以使用file.type判断文件的类型

3.调取后端接口,获取上传阿里云的参数

ossParams().then(res => {
          const client = new OSS.Wrapper({
          accessKeyId: res.data.accessKeyId,
          accessKeySecret: res.data.accessKeySecret,
          bucket: res.data.bucket,
          endpoint: res.data.endpoint,
          region: res.data.region,
          secure: true
        })

4.随机定义文件的名称

let randomName = that.random_string()
random_string (len) {    //定义在上传文件之外的方法
      len = len || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var maxPos = chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    }

5.设置上传的进度

const progress = function (p) {
        return function (done) {
          that.percentage = Math.floor(p * 100)
          done()
        }
      }

6.开始进行上传(放在阿里云的abc文件夹下)

client.multipartUpload('abc/' + randomName, file, { progress: progress }).then(function (result) {
          // console.log(result)
          that.vedioUrl = result.res.requestUrls[0].split('?uploadId=')[0]
          that.$message({
            message: '上传成功',
            type: 'success'
          })
        }).catch(() => {
          that.$message({
            message: '上传失败',
            type: 'error'
          })
        })
 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值