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>
  • 相关阅读:
    OSX 10.8+下开启Web 共享 的方法
    OSX 10.8+下开启Web 共享 的方法
    OSX 10.8+下开启Web 共享 的方法
    ★如何解释特修斯之船问题?
    ★如何解释特修斯之船问题?
    ★如何解释特修斯之船问题?
    JS中event.keyCode用法及keyCode对照表
    JS中event.keyCode用法及keyCode对照表
    JS中event.keyCode用法及keyCode对照表
    用webgl打造自己的3D迷宫游戏
  • 原文地址:https://www.cnblogs.com/ppzhang/p/13858418.html
Copyright © 2011-2022 走看看