结合element的el-upload直传到阿里云（图片+视频）

应用场景

直传图片和视频到阿里云

image.png

实现方法

安装ali-oss

npm install ali-oss

自定义文件夹创建oss.js文件

const OSS = require('ali-oss')
export function client (data) {
  // 后端提供接口
  return new OSS({
    region: 'oss-cn-hangzhou',
    accessKeyId: data.accessId,
    accessKeySecret: data.assessKey,
    stsToken: data.securityToken,
    bucket: data.bucket
  })
}

element-ui 上传组件

 <el-upload
       class="upload-demo"
       multiple
       action=""
      :before-upload="beforeUpload"
      :http-request="doUpLoad"
      :show-file-list = false>
     <i class="el-icon-upload2"> 上传图片</i>
     <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件</div>
  </el-upload>

JS部分

// 先导入js文件
import { oss } from './../../../tools/oss.js'
data () {
  return {
    dataObj: {} // 存签名信息
  }
},
methods: {
  beforeUpload (file) {
       // 上传之前对文件做些格式和大小的限制
      // 这里是请求后台的签名接口
        return new Promise((resolve, reject) => {
            this.$axios({
            method: 'post',
            url: 'url',
            data: data
          }).then(res => {
             this.dataObj = res
            resolve(true)
          })
        })
      },
// 执行上传到阿里云的动作
   doUpLoad (file) {
      // 这边写你上传到阿里云必须的参数
        const self = this
        let files = file.file
        this.fileKey = this.getNumber(32) + suffix
        client(this.dataObj).multipartUpload(this.fileKey, file.file).then(result => {
          self.$message({
            message: '上传成功',
            type: 'success',
            duration: 30
          })
        })
      },
}