zoukankan      html  css  js  c++  java
  • vue上传视频或者图片到七牛云

    首先下载七牛云的JavaScript-SDK

    npm install qiniu-js
    

      

    下载完成JavaScript-SDK以后就可以上传图片信息了

    <template>
      <div>
          <input type="file" name='upFile' id="upFile" @change='changeFile($event)'>
          <input type="button" name="开始上传" value="开始上传" @click='uploadFile()'>
          <img v-if="coverUrl" :src="coverUrl" alt="封面">
          <el-progress :percentage="filePercent"></el-progress>
          {{filePercent}}
      </div>
    </template>
    <script>
    import * as qiniu from "qiniu-js";
     
    export default {
      name:'qiniu',
      data() {
        return {
          file:null,
          videoUrl:null,
          coverUrl:null,
          filePercent:0
        };
      },
      methods: {
        changeFile(e){
        //   获取文件
          this.file = e.target.files[0];
        },
        uploadFile() {
        // 当前VUE中的this 是指向实例,相当于父级,指向指不到子级中。所需需要一个变量 _this 存储this得指向。
          let _this = this
        // 获取身份的token
          let token = '6iHLwjADA4xPDG9Wl5FdJFkdU_mcaE5YrgDyoFHa:xT_22Uqm24-ZLGRFvk74Z7F-Xrw=:eyJzY29wZSI6ImppeXVuZWR1IiwiZGVhZGxpbmUiOjE2MDMzNTI0OTh9'
        // 上传时的配置
          var config = {
            useCdnDomain: true
          };
        //  设置文件的配置
          var putExtra = {
            fname: "",
            params: {},
            mimeType: null
          };
    
        //   实例化七牛云的上传实例
          var observable = qiniu.upload(_this.file, null, token, putExtra, config);
        //   设置实例的监听对象
          var observer = {
            //   接收上传进度信息
            next(res) {
                // 上传进度
                _this.filePercent = parseInt(res.total.percent) 
                if(_this.filePercent==100){
                    console.log("success")
                } 
            },
            // 接收上传错误信息
            error(err) {
              console.log(err)
            },
    
            // 接收上传完成后的信息
            complete(res) {
                 console.log(res.key)
            }
          };
          // 上传开始
          var subscription = observable.subscribe(observer); 
        }
        
      }
    };
    </script>
    

      

  • 相关阅读:
    94. Binary Tree Inorder Traversal
    101. Symmetric Tree
    38. Count and Say
    28. Implement strStr()
    实训团队心得(1)
    探索性测试入门
    LC.278. First Bad Version
    Search in Unknown Sized Sorted Array
    LC.88. Merge Sorted Array
    LC.283.Move Zeroes
  • 原文地址:https://www.cnblogs.com/zhangzetao/p/13950437.html
Copyright © 2011-2022 走看看