cnlive_project / singsong · Files

// Init Vue
const Audio = {
  created() {
    request({
      url: urls.base + urls.token + "?spId=802",
      method: "get"
    }).then(res => {
      this.token = res.data;
    });
  },
  data() {
    return {
      form: {
        songName: null,
        lyricist: null,
        songwriter: null,
        channelId: 1278,
        redact: null,
        lyric: null,
        mixing: null,
        audioId: null,
        audioFile: null
      },
      rules: {
        songName: [{ required: true, trigger: "change", message: "请填写歌曲名字" }],
        phone: [
          {
            required: true,
            trigger: "change",
            message: "请填写格式正确的手机号码",
            validator: validatePhone
          }
        ],
        audioFile: [{ required: true, trigger: "change", message: "请上传音频" }],
        channelId: [{ required: true, trigger: "change", message: "请选择作品类型" }],
        audioId: [{ required: true, trigger: "change", message: "请上传音频文件以获取音频ID" }]
      },

      uploadUrl: "",
      fileList: [],
      token: "",
      msgText: ''
    };
  },
  methods: {
    exceed(e, d) {
      this.$message.error('只能上传一个文件')
    },
    handleRemove() {
      this.$confirm('该删除过程不会取消文件上传过程?', '提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(r => {
        this.form.audioId = null
      }).catch(error =>{
        console.log(error)
      })
    },
    initMd5(fileObj) {
      return new Promise((resolve, reject) => {
        const fileName = fileObj.name.split(".")[0];
        const fileType = fileObj.name.split(".")[1];
        const fileSize = fileObj.size;
        const fileModifyDate = fileObj.lastModifiedDate;
        const md5Str = initVideoMd5(
          [fileType, fileSize, fileModifyDate || fileName].join("_")
        ).toLowerCase();
        if (md5Str) {
          resolve(md5Str);
        } else {
          reject("校验失败");
        }
      });
    },
    submit() {
      this.$refs.form.validate(v => {
        if (v) {
          request({
            url: 'http://cmstest.cnlive.com:8768/contentApi/audioSave',
            method: 'post',
            params: this.form,
            withCredentials: true,
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              "Access-Control-Allow-Origin": "*",
              "content-type": "application/json;charset=UTF-8"
            }
          }).then(res => {
            if(res.data) {
              setTimeout(() => {
                window.location.href = './success.html'
              }, 1000)
            } else {
              setTimeout(() => {
                window.location.href = './failed.html'
              }, 1000)
            }
          })
        } else {
          this.$message.error("请补全表单内容");
        }
      });
    },
    getTxt(e) {
      this.form.txtFile = e.raw;
      let file = e.raw;
      (reader = new FileReader()), (that = this);
      reader.onload = function(evt) {
        var data = evt.target.result;
        console.log(data);
        console.log(String.fromCharCode.apply(null, new Uint16Array(data)));
      };
      reader.readAsArrayBuffer(file);
    },
    getMp3(file) {
      this.msgText = '音频已开始上传，上传过程中请勿刷新页面。'
      this.form.audioFile = file
      const fileName = file.raw.name.split(".");
      fileName.splice(fileName.length - 1, 1);
      const that = this;
      const fileBaseObj = {
        videoName: fileName.join("."),
        md5: null
      };
      const fileSaveObj = {
        videoId: null,

        multipleCategory: 100005,
        tag: "test",
        synopsis: "test",
        mmsType: 0,
        videoType: 11003,
        videoType: 0,
        masterId: 10505921
      };
      const fileInitObj = {
        gfmt: file.raw.name
          .split(".")
          .reverse()
          .shift(),
        fileSize: file.raw.size,
        videoType: 11003,
        ptpwVal: 0,
        archiveStatus: 0,
        multipleCategory: 100005,
        uploadLine: 2,
        masterId: 10505921
      };
      const fileWholeObj = {
        file: file.raw,
        uploadStatus: "ready",
        proCount: 0,
        fileKey: null,
        observable: null,
        subscription: null
      };

      if (this.token == null) {
        this.$message({
          type: "error",
          message: "获取七牛token失败，请联系管理员"
        });
        return false;
      }

      const observer = {
        next(res) {},
        error(err) {
          console.log(err);
        },
        complete(res) {
          request({
            url: urls.base + urls.save,
            method: "get",
            params: {
              hash: res.hash,
              key: res.key,
              vid: fileSaveObj.videoId
            }
          })
            .then(res => {
              console.log(res);
            })
            .catch(error => {
              return request({
                url: urls.onlineUrl + urls.transcode,
                params: {...fileBaseObj, ...fileSaveObj},
                method: "get"
              });
            })
            .then(data => {
              that.form.audioId = data.data.data.obj
              that.msgText = '音频上传成功'
            }).catch(error => {
              console.log(error)
            })
        }
      };

      Promise.all([
        validateVideoSize(fileInitObj.fileSize),
        validateVideoFormat(fileInitObj.gfmt),
        validateNameLength(fileBaseObj.videoName)
      ])
        .then(check => {
          return this.initMd5(file.raw);
        })
        .then(n => {
          fileBaseObj.md5 = n;
          return request({
            url: urls.onlineUrl + urls.initFileOnline,
            method: "get",
            params: {...fileBaseObj, ...fileInitObj}
          });
        })
        .then(res => {
          if (res && res.data) {
            fileSaveObj.videoId = res.data.data.obj.vid;
            fileWholeObj.fileKey = res.data.data.obj.originPath;
            putExtra.params["x:name"] = fileWholeObj.fileKey;
            fileWholeObj.observable = qiniu.upload(
              file.raw,
              fileWholeObj.fileKey,
              this.token,
              putExtra,
              cdnConfig
            );
            fileWholeObj.subscription = fileWholeObj.observable.subscribe(
              observer
            );
          } else {
            this.$message({
              type: "error",
              duration: 0,
              message: "未知错误，请联系管理员。"
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "error",
            message: error,
            duration: 0
          });
        });
    }
  }
};

Vue.createApp(Audio)
  .use(ElementPlus)
  .mount("#audio");