zoukankan      html  css  js  c++  java
  • 录音上传

    <template>
      <div id="pic_upload dddd">
        <div></div>
      </div>
    </template>
    <script>
    export default {
      name: "ckaudio",
      props: {
        file: {
          default: {}
        }
      },
      data() {
        return {
          previewShow: false
        };
      },
      watch: {
        file: {
          handler: function(val) {
            console.log(val);
            this.fileChanges(val);
          },
          deep: true
        }
      },
      methods: {
        // 文件上传后
        fileChanges(file) {
          // 请求七牛 token
          this.axios.get("/weChat/qiniu/token").then(response => {
            let token = response.data.data;
            //上传七牛
            this.uploading(token, file);
            return;
          });
        },
        //录音上传
        uploading(token, e) {
          if (e.target.files.length) {
            for (let i = 0; i < e.target.files.length; i++) {
              let file = e.target.files[i];
              let param = new FormData(); //创建form对象
              param.append("chunk", "0"); //断点传输
              param.append("chunks", "1");
              param.append("file", file, file.name);
              param.append("token", token);
              let config = {
                headers: {
                  "Content-Type": "multipart/form-data"
                }
              };
              let url = "https://upload-z1.qiniup.com/";
              this.axios
                .post(url, param, config)
                .then(response => {
                  // if (response.statusText != "OK") {
                  //   return;
                  // }
                  this.$emit("audiodata", response.data.key );
                })
                .catch(err => {
                  alert("上传录音错误,请重新上传");
                });
            }
          }
        }
      }
    };
    </script>
    <style lang="less" scope>
    .img_preview .el-dialog__body {
      padding: 0px !important;
    }
    .img_preview img {
       100%;
      height: auto;
    }
    </style>
    <label for="newlabel" class="el-button el-button--primary is-plain">上传录音</label>
                <input
                  type="file"
                  id="newlabel"
                  @change="($event)=> {fileAudio = $event}"
                  :multiple="true"
                />
          <ckaudio :file="fileAudio" @audiodata="audiodata"></ckaudio>
          fileAudio: {},
    audiodata(val) {
          if (val) {
            let params = {
     
            };
            this.api
              .post("", params)
              .then(res => {
              
              })
              .catch(err => {
                console.log(err);
              });
          }
        },





  • 相关阅读:
    Zookeeper Acl权限 超级用户权限 怎么跳过ACL密码/账户验证
    白名单与黑名单
    通过mstsc复制粘贴失败需要重新启动RDP剪切板监视程序rdpclip.exe
    go命令帮助
    go build 与go install
    1.Python编程基础
    使用 JMeter 进行压力测试
    js控制手机保持亮屏的库,解决h5移动端,自动息屏问题
    Linux安装配置redis 、启动redis、redis设置密码
    Linux安装部署FTP服务器
  • 原文地址:https://www.cnblogs.com/ylblogs/p/13361598.html
Copyright © 2011-2022 走看看