阿里云oss上传

上传到oss的经历

1、安装ali-oss

npm install ali-oss

加粗样式

const OSS = require('ali-oss')

export function client(data) {
    //后端提供数据
  return new OSS({
    region: data.region,  
    accessKeyId: data.accessKeyId,
    accessKeySecret: data.accessKeySecret,
    bucket: data.bucket
  })
}

2.使用element-ui的Upload作为上传组件，http-request 来绑定自定义上传的方法Upload，action写为空。 :before-upload=“beforeUpload” 表示在上传前做的事情，绑定了方法beforeUpload，我们可以在这个方法里获取所需要的一些信息，比如签名等等

<el-upload
      :http-request="Upload"
      :data="dataObj" 
      :multiple="false"
      :show-file-list="false"
      :before-upload="beforeUpload" //在上传前做的事情
      class="image-uploader"
      drag
      action=""
    >
      <i class="el-icon-upload"/>
      <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
    </el-upload>

3、data里面的

data() {
      return {
        tempUrl: '', //存上传后的图片url
        dataObj: {}, //存签名信息
        baseAli: ' ', //后面连接图片url用的，根据自己aili OSS 配制修改，我是根据后台的返回的region然后拼接的
      progress:0//进度条
      }
    },

4、从后台获取client里面的参数

this.dataObj = res(res为后台返回的数据)
this.baseAli = res.data.info.region+".aliyuncs.com"

5、

 Upload(file) {
        const that = this
        //判断扩展名
        const tmpcnt = file.file.name.lastIndexOf(".")
        const exname = file.file.name.substring(tmpcnt + 1)
        const names = ['jpg', 'jpeg', 'webp', 'png','bmp']
        if(names.indexOf(exname)< 0 ){
          this.$message.error("不支持的格式!")
          return
        }
        async function multipartUpload () {
		const fileName = that.name + file.file.uid
          //定义唯一的文件名，打印出来的uid其实就是时间戳
          //client 是第一步中的 client
          client(that.dataObj).multipartUpload(fileName, file.file,
            {
              progress:function (p) { //获取进度条的值
                console.log(p)
                that.progress = p*100
              },
		 }).then(
            result => {
              //下面是如果对返回结果再进行处理，根据项目需要
              // console.log(result)
              that.tempUrl = 'http://'+result.bucket+'.'+that.baseAli+ '/' + result.name

            }).catch(err => {
            console.log("err:",err)
          })
        }
        multipartUpload ()


      },

错误部分

1、client参数对应错误

跟后台参数对上之后解决

2、出现403和跨域问题

首先解决跨域，阿里云后台把bucket的跨域设置好就好了，但是403还存在

**2、err: InvalidAccessKeyIdError: The OSS Access Key Id you provided does not exist in our records. **

因为没有设置访问权限

export function client(data) {
        //后端提供数据
        return new OSS({
            region: data.region,  //oss-cn-shenzhen.aliyuncs.com
            accessKeyId: data.AccessKeyId,
            accessKeySecret: data.AccessKeySecret,
            bucket: data.bucket,
            stsToken:data.SecurityToken
        })
    }

上传结束