change progress for file upload

杨泽宇
1 parent 9d83c27e
Showing 3 changed files with 217 additions and 45 deletions
dist/audio.html
src/html/index.html
src/js/audios.js
@@ -69,22 +69,28 @@
           </el-form-item>
           <el-divider></el-divider>
           <el-form-item style="width: 50%; text-align: left;">
-            <span style="color: #4A90E2; font-size: 20px" v-if="percent > 0 && percent < 100">已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
-            <span style="color: #4A90E2; font-size: 20px" v-if="percent == 100">上传完成</span>
+            <span style="color: #4A90E2; font-size: 20px">{{form.audioFile?.name}} </span>
+            <span style="color: #4A90E2; font-size: 20px" v-if="percent > 0 && percent < 100"> 已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
+            <span style="color: #4A90E2; font-size: 20px" v-if="percent == 100"> 上传完成</span>
           </el-form-item>
           <el-form-item style="width: 50%; text-align: right;">
             <el-button @click="reset" v-if="form.channelId == 1279">取消</el-button>
-            <el-button @click="reset" v-else :disabled="!form.audioId">取消</el-button>
+            <el-button @click="reset" v-else :disabled="!form.audioFile || submitDisabled">取消</el-button>
-            <el-button type="danger" @click="submitForm" v-if="form.channelId == 1279">确定上传</el-button>
-            <el-button type="danger" @click="submitForm" v-else :disabled="!form.audioId">确定上传</el-button>
+            <!-- <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
+            <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
+            <el-button type="danger" @click="submit('songs')" v-else>确定上传</el-button> -->
+            <!-- <el-button type="danger" @click="submit('songs')" v-else :disabled="!form.audioId">确定上传</el-button> -->
+
+            <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
+            <el-button type="danger" @click="submit('songs')" v-else :disabled="!form.audioFile || submitDisabled">确定上传</el-button>
           </el-form-item> 
         </el-form>
       </div>
     </el-card>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@3.2.11/dist/vue.global.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
+  <script src="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.12"></script>
   <script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
 <script src="/bundle.js"></script></body>
@@ -69,22 +69,28 @@
           </el-form-item>
           <el-divider></el-divider>
           <el-form-item style="width: 50%; text-align: left;">
-            <span style="color: #4A90E2; font-size: 20px" v-if="percent > 0 && percent < 100">已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
-            <span style="color: #4A90E2; font-size: 20px" v-if="percent == 100">上传完成</span>
+            <span style="color: #4A90E2; font-size: 20px">{{form.audioFile?.name}} </span>
+            <span style="color: #4A90E2; font-size: 20px" v-if="percent > 0 && percent < 100"> 已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
+            <span style="color: #4A90E2; font-size: 20px" v-if="percent == 100"> 上传完成</span>
           </el-form-item>
           <el-form-item style="width: 50%; text-align: right;">
             <el-button @click="reset" v-if="form.channelId == 1279">取消</el-button>
-            <el-button @click="reset" v-else :disabled="!form.audioId">取消</el-button>
+            <el-button @click="reset" v-else :disabled="!form.audioFile || submitDisabled">取消</el-button>
-            <el-button type="danger" @click="submitForm" v-if="form.channelId == 1279">确定上传</el-button>
-            <el-button type="danger" @click="submitForm" v-else :disabled="!form.audioId">确定上传</el-button>
+            <!-- <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
+            <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
+            <el-button type="danger" @click="submit('songs')" v-else>确定上传</el-button> -->
+            <!-- <el-button type="danger" @click="submit('songs')" v-else :disabled="!form.audioId">确定上传</el-button> -->
+
+            <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
+            <el-button type="danger" @click="submit('songs')" v-else :disabled="!form.audioFile || submitDisabled">确定上传</el-button>
           </el-form-item> 
         </el-form>
       </div>
     </el-card>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@3.2.11/dist/vue.global.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
+  <script src="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.12"></script>
   <script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
 </body>
@@ -33,8 +33,7 @@ const Audio = {
           {
             required: true,
             trigger: "change",
-            message: "请填写歌曲名字",
-            // validator: all.validateName,
+            message: "请填写歌曲名字"
           },
         ],
         name: [
@@ -45,7 +44,7 @@ const Audio = {
             required: true,
             trigger: "change",
             message: "请填写格式正确的手机号码",
-            // validator: all.validatePhone,
+            validator: all.validatePhone,
           },
         ],
         audioFile: [
@@ -67,6 +66,7 @@ const Audio = {
       fileList: [],
       token: "",
       btnDisabled: false,
+      submitDisabled: false,
       msgText:
         "只能上传一个mp3/flac/wav/ogg格式的音频文件,且不超过500mb。上传过程中请勿刷新页面。",
       percent: 0,
@@ -91,9 +91,9 @@ const Audio = {
       for (let i in this.form) {
         this.form[i] = null;
       }
-      this.form["channelId"] = 1278;
       this.percent = 0;
       this.btnDisabled = false;
+      this.submitDisabled = false;
     },
     handleRemove(file, list) {
       if (this.percent < 100) {
@@ -126,34 +126,193 @@ const Audio = {
         }
       });
     },
-    submitForm(formName) {
-        this.form.lyric = 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);
+    submit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.submitDisabled = true;
+          this.btnDisabled = true;
+          if (this.form.channelId == 1279) {
+            this.postCms();
+          } else {
+            const fileName = this.form.audioFile.raw.name.split(".");
+            fileName.splice(fileName.length - 1, 1);
+            this.curFile = this.form.audioFile.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: this.form.audioFile.raw.name.split(".").reverse().shift(),
+              fileSize: this.form.audioFile.raw.size,
+              videoType: 11003,
+              ptpwVal: 0,
+              archiveStatus: 0,
+              multipleCategory: 100005,
+              uploadLine: 2,
+              masterId: 10494974,
+            };
+            const fileWholeObj = {
+              file: this.form.audioFile.raw,
+              uploadStatus: "ready",
+              proCount: 0,
+              fileKey: null,
+              observable: null,
+              subscription: null,
+            };
+
+            if (this.token == null) {
+              this.$message({
+                type: "error",
+                message: "获取七牛token失败，请联系管理员",
+              });
+              return false;
             }
-          })
-          .catch((error) => {
-            console.log(error);
-          });
+
+            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.btnDisabled = false;
+                    that.percent = 100;
+                    that.postCms();
+                  })
+                  .catch((error) => {
+                    console.log(error);
+                  });
+              },
+            };
+
+            Promise.all([
+              all.validateVideoSize(fileInitObj.fileSize),
+              all.validateVideoFormat(fileInitObj.gfmt),
+              all.validateNameLength(fileBaseObj.videoName),
+            ])
+              .then((check) => {
+                return this.initMd5(this.form.audioFile.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(
+                    this.form.audioFile.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,
+                });
+              });
+          }
+        } else {
+          this.$message.error("请检查表单内容");
+          this.submitDisabled = false;
+          this.btnDisabled = false;
+          return false;
+        }
+      });
+    },
+    postCms() {
+      this.form.lyric = 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(() => {
+              console.log("jump");
+              // window.location.replace("./success.html");
+            }, 1000);
+          } else {
+            setTimeout(() => {
+              console.log("jump");
+              // window.location.replace("./failed.html");
+            }, 1000);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        })
+        .finally(() => {
+          this.btnDisabled = false;
+          this.submitDisabled = false;
+        });
     },
     getTxt(e) {
       this.form.txtFile = e.raw;
@@ -167,9 +326,10 @@ const Audio = {
       reader.readAsArrayBuffer(file);
     },
     getMp3(file) {
-      // this.msgText = '音频已开始上传，上传过程中请勿刷新页面。'
-      this.btnDisabled = true;
+      // this.btnDisabled = true;
       this.form.audioFile = file;
+      console.log(this.fileList);
+      return false;
       const fileName = file.raw.name.split(".");
       fileName.splice(fileName.length - 1, 1);
       this.curFile = file.name;