杨泽宇 / cms_songs · Files

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

      uploadUrl: "",
      fileList: [],
      token: "",
      btnDisabled: false,
      msgText: "只能上传一个mp3/flac/wav/ogg格式的音频文件,且不超过500mb。上传过程中请勿刷新页面。",
      percent: 0,
      curFile: ''
    };
  },
  methods: {
    // 作品类型为【词】的时候可以不上传文件
    handleChange(data) {
      if(data == 1279) {
        this.rules.audioFile[0].required = false
        this.rules.audioId[0].required = false
      } else {
        this.rules.audioFile[0].required = true
        this.rules.audioId[0].required = true
      }
    },
    exceed(e, d) {
      this.$message.error('只能上传一个文件')
    },
    reset() {
      for (let i in this.form) {
        this.form[i] = null
      }
      this.form['channelId'] = 1278
      this.percent = 0
      this.btnDisabled = false
    },
    handleRemove(file, list) {
      if(this.percent < 100) {
        this.$message({
          type: 'error',
          duration: 5000,
          message: '上传中的文件不可被删除'
        })
        return false
      } else {
        this.form.audioId = null
        this.percent = 0
      }
    },
    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 = all.initVideoMd5(
          [fileType, fileSize, fileModifyDate || fileName].join("_")
        ).toLowerCase();
        if (md5Str) {
          resolve(md5Str);
        } else {
          reject("校验失败");
        }
      });
    },
    submit() {
      this.$refs.form.validate(v => {
        if (v) {
          this.form.lyric = this.form.lyric.trim()
          all.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.replace("./success.html");
              }, 1000)
            } else {
              setTimeout(() => {
                window.location.replace("./failed.html");
              }, 1000)
            }
          }).catch(error => {
            console.log(error)
          })
        } 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.btnDisabled = true
      this.form.audioFile = file
      const fileName = file.raw.name.split(".");
      fileName.splice(fileName.length - 1, 1);
      this.curFile = file.name
      this.form.audioId = null
      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: 10494974
      };
      const fileInitObj = {
        gfmt: file.raw.name
          .split(".")
          .reverse()
          .shift(),
        fileSize: file.raw.size,
        videoType: 11003,
        ptpwVal: 0,
        archiveStatus: 0,
        multipleCategory: 100005,
        uploadLine: 2,
        masterId: 10494974
      };
      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) {
          if (res.total.percent >= 99) {
            that.percent = 99
          } else {
            that.percent = Math.ceil(res.total.percent)
          }
        },
        error(err) {
          console.log(err);
        },
        complete(res) {
          all.request({
            url: all.urls.base + all.urls.save,
            method: "get",
            params: {
              hash: res.hash,
              key: res.key,
              vid: fileSaveObj.videoId
            }
          })
            .then(res => {
              console.log(res);
            })
            .catch(error => {
              return all.request({
                url: all.urls.onlineUrl + all.urls.transcode,
                params: {...fileBaseObj, ...fileSaveObj},
                method: "get"
              });
            })
            .then(data => {
              that.form.audioId = data.data.data.obj
              // that.msgText = '音频上传成功'
              that.btnDisabled = false
              that.percent = 100
            }).catch(error => {
              console.log(error)
            })
        }
      };

      Promise.all([
        all.validateVideoSize(fileInitObj.fileSize),
        all.validateVideoFormat(fileInitObj.gfmt),
        all.validateNameLength(fileBaseObj.videoName)
      ])
        .then(check => {
          return this.initMd5(file.raw);
        })
        .then(n => {
          fileBaseObj.md5 = n;
          return all.request({
            url: all.urls.onlineUrl + all.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;
            all.putExtra.params["x:name"] = fileWholeObj.fileKey;
            fileWholeObj.observable = qiniu.upload(
              file.raw,
              fileWholeObj.fileKey,
              this.token,
              all.putExtra,
              all.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");