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





  • 相关阅读:
    [论文笔记] Human Computation (DAC, 2009)
    [论文收集] HCOMP 2011概况及收录论文
    [论文笔记] reCAPTCHA: HumanBased Character Recognition via Web Security Measures (Science, 2008)
    [论文笔记] Crowdsourced Databases: Query Processing with People (CIDR, 2011)
    [论文笔记] Crowdsourcing Translation: Professional Quality from NonProfessionals (ACL, 2011)
    [阅读笔记] A Report on the Human Computation Workshop (HCOMP, 2009)
    [论文速读] Towards crowdsourcing translation tasks in library cataloguing, a pilot study (DEST, 2010)
    [文章摘录] Strategies for EarlyStage Collaborative Design (IEEE Software, 2012)
    [论文笔记] Task Matching in Crowdsourcing (iThings & CPSCom, 2011)
    [论文笔记] Exploring microwork opportunities through cybercafés (ACM DEV, 2012)
  • 原文地址:https://www.cnblogs.com/ylblogs/p/13361598.html
Copyright © 2011-2022 走看看