美文网首页那些年遇到的坑
结合element的el-upload直传到阿里云(图片+视频)

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

作者: 筱贰_梁 | 来源:发表于2019-11-13 11:02 被阅读0次

    应用场景

    直传图片和视频到阿里云


    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
              })
            })
          },
    }
    

    相关文章

      网友评论

        本文标题:结合element的el-upload直传到阿里云(图片+视频)

        本文链接:https://www.haomeiwen.com/subject/dahhictx.html