本地音乐和网易云音乐同时上传

src/api/axios.js

@@ -4,7 +4,6 @@ import qs from 'qs'
 axios.defaults.withCredentials = true// 允许跨域设置，不然可能因为拿不到cookie而报错
 
 axios.defaults.baseURL = 'http://localhost:3000/'   /*这里的地址就是刚刚启起来的服务器地址  */
-
 /*请求拦截*/
 axios.interceptors.request.use(
   config => {

src/views/sce/sceInfo/index.vue

@@ -99,6 +99,7 @@
     <!-- 新增表单 -->
     <el-dialog
       @open="openDialog"
+      @close="closeDialog"
       :title="dialog.title"
       :visible.sync="dialog.Visible"
       width="1000px"
@@ -147,19 +148,28 @@
             v-if="type == 'add' || type == 'edit'"
             class="avatar-uploader"
             action
+            list-type="picture-card"
             :show-file-list="false"
-            :auto-upload="false"
-            :on-change="uploadImg"
+            :on-progress="uploadImg" 
             :on-success="handleAvatar"
             :before-upload="beforeAvatarUpload"
             element-loading-text="正在上传..."
             v-loading="loadingCover"
           >
+            <!-- :on-change="uploadImg" -->
+            <!-- :auto-upload="false" -->
+
+          	<!-- <el-upload class="avatar-uploader" :show-file-list="false" action  list-type="picture-card"
+				 :on-progress="uploadChange" > -->
+
+
+
+
             <img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar" />
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
-        <el-progress :percentage="jinduCoverNum" v-if="jinduShowCover" status="success"></el-progress>
+        <el-progress :percentage="jinduCoverNum" v-if="jinduShowCover"></el-progress>
         <el-form-item label="其它图片" style="width:100%">
           <div
             v-for="(item, l) in dataImg"
@@ -189,11 +199,12 @@
             style="float:left;margin-left: 10px;"
             action
             list-type="picture-card"
+            :on-progress="changeImgs"
             :show-file-list="false"
-            :http-request="changeImgs"
             element-loading-text="正在上传..."
             v-loading="loadingOtherImg"
           >
+            <!-- :http-request="changeImgs" -->
             <i class="el-icon-plus"></i>
           </el-upload>
           <!-- <el-upload
@@ -226,7 +237,7 @@
             </div>
           </el-upload> -->
         </el-form-item>
-        <el-progress :percentage="jinduOtherImgNum" v-if="jinduShowOtherImg" status="success"></el-progress>
+        <el-progress :percentage="jinduOtherImgNum" v-if="jinduShowOtherImg"></el-progress>
         <h3 class="form-title">剧本简介</h3>
         <el-form-item label="简介" prop="introduction" style="width:100%">
           <!-- <el-input
@@ -429,17 +440,18 @@
             action
             list-type="picture-card"
             :show-file-list="false"
-            :http-request="labeluploadimg"
+            :on-progress="labeluploadimg"
             element-loading-text="正在上传..."
             v-loading="loadingImg"
           >
+            <!-- :http-request="labeluploadimg" -->
             <i class="el-icon-plus"></i>
           </el-upload>
           <el-dialog :visible.sync="dialogVisible">
             <img width="100%" :src="dialogImageUrl" alt="" />
           </el-dialog>
         </el-form-item>
-        <el-progress :percentage="jinduImgNum" v-if="jinduShowImg" status="success"></el-progress>
+        <el-progress :percentage="jinduImgNum" v-if="jinduShowImg"></el-progress>
 
 
         <el-form-item
@@ -536,7 +548,6 @@
         </el-form-item>
         <el-form-item label="音频" prop="imgUrls" style="width: 100%;">
           <el-radio-group
-            :disabled="disabled"
             v-model="radioMusic"
             @change="changeMusic"
           >
@@ -601,7 +612,7 @@
             </div>
             <div style="display:flex;width:280px">
                 <div style="width:70px;">标题:</div>
-                <el-input v-model="item.title" placeholder="请输入标题"></el-input>
+                <el-input v-model="item.title" placeholder="请输入标题" :disabled='disabled'></el-input>
             </div>
           </div>
           <el-upload
@@ -611,18 +622,19 @@
             action
             list-type="picture-card"
             :show-file-list="false"
+            :on-progress='labeluploadmusic'
             :before-upload="uploadAudio"
-            :http-request="labeluploadmusic"
             element-loading-text="正在上传..."
             v-loading="loadingAudio"
           >
+            <!-- :http-request="labeluploadmusic" -->
             <i class="el-icon-plus"></i>
           </el-upload>
           <el-dialog :visible.sync="dialogVisible">
             <img width="100%" :src="dialogImageUrl" alt="" />
           </el-dialog>
         </el-form-item>
-        <el-progress :percentage="jinduAudioNum" v-if="jinduShowAudio" status="success"></el-progress>
+        <el-progress :percentage="jinduAudioNum" v-if="jinduShowAudio"></el-progress>
         <el-form-item
           v-if="radioMusic == 2"
           style="width: 100%;"
@@ -698,10 +710,8 @@
               width="50"
             />
             <el-table-column align="center" property="title" label="资源标题">
-              <template>
-                <div>
-                  11111111
-                </div>
+              <template slot-scope="scope">
+                {{ scope.row.title }}
               </template>
             </el-table-column>
             <el-table-column align="center" property="url" label="资源URL" />
@@ -803,16 +813,17 @@
             list-type="picture-card"
             :show-file-list="false"
             :before-upload="uploadVideo"
-            :http-request="labeluploadvideo"
-            :on-success="successVideo"
+            :on-progress='labeluploadvideo'
             element-loading-text="正在上传..."
             v-loading="loading"
           >
+          <!-- :on-progress='startVideo' -->
+            <!-- :http-request="labeluploadvideo" -->
             <i class="el-icon-plus"></i>
           </el-upload>
           <!-- <el-dialog :visible.sync="dialogVideo"> </el-dialog> -->
         </el-form-item>
-        <el-progress :percentage="jinduVideoNum" v-if="jinduShowVideo" status="success"></el-progress>
+        <el-progress :percentage="jinduVideoNum" v-if="jinduShowVideo"></el-progress>
         <el-form-item
           v-if="radioVideo == 2"
           style="width: 100%;"
@@ -1070,8 +1081,25 @@ export default {
     this.queryList();
     // this.queryFindList();
   },
+  watch:{
+    jinduCoverNum(newV,oldV){
+      console.log('新',newV);
+      console.log('旧',oldV);
+    },
+    jinduVideoNum(newV,oldV){
+      console.log('新',newV);
+      console.log('旧',oldV);
+    }
+  },
   methods: {
-
+    format(percentage) {
+       console.log(percentage);
+        return percentage === 100 ? `${percentage}%` : `${percentage}%`;
+    },
+    uploadChange(e){
+      console.log('123');
+      console.log('e',e.percent); //文件上传进度
+    },
     getWangyi () {
       axios({
         url: '/song/url?id=38358820',  /*热门音乐链接接口地址*/
@@ -1135,6 +1163,21 @@ export default {
       }
       return isLt2G;
     },
+    //关闭弹窗
+    closeDialog(){
+      console.log('关闭');
+      // uploadFile=null;
+      // var uploadFile=null;
+      this.ruleForm = {
+        processesList: [],
+        imgUrl: "",
+        imgUrls: [],
+        radioImg: [],
+        radioMusic: [],
+        radioVideo: [],
+        resourcesList: []
+      };
+    },
     //新增剧本流程数据
     openDialog() {
       if (this.dialog.title == "新增剧本") {
@@ -1321,6 +1364,8 @@ export default {
 
         var img = [];
         var music = [];
+        var musicBendi = [];//本地音乐回显
+        var musicWangyi = [];//网易云回显
         var video = [];
         for (var i in res.data.resourcesList) {
           if (
@@ -1354,25 +1399,29 @@ export default {
         }
         for (var i in res.data.resourcesList) {
           if (
-            res.data.resourcesList[i].mediaType == 2 &&
-            res.data.resourcesList[i].sourceType == 2
-          ) {
+            res.data.resourcesList[i].mediaType == 2 && //音乐类型
+            res.data.resourcesList[i].sourceType == 2 //网易云
+          ) { //网易云回显
             this.radioMusic = 2;
-            music.push(res.data.resourcesList[i]);
+            this.wangyiyunType = 'wangyiyun'
+            musicWangyi.push(res.data.resourcesList[i]);
           }
-          if (
-            res.data.resourcesList[i].mediaType == 2 &&
-            res.data.resourcesList[i].sourceType == 1
+          if ( //本地音乐回显
+            res.data.resourcesList[i].mediaType == 2 && //音乐类型
+            res.data.resourcesList[i].sourceType == 1 //本地
           ) {
             this.radioMusic = 1;
-            music.push(res.data.resourcesList[i]);
-             console.log('music',res.data.resourcesList[i]);
+            musicBendi.push(res.data.resourcesList[i]);
+            // console.log('本地音乐',music);
           }
         }
-        if (this.radioMusic == 1) {
-          this.musicData = music;
-        } else if (this.radioMusic == 2) {
-          this.ruleForm.radioMusic = music.map(n => {
+        if (this.radioMusic == 1) { //本地回显
+          this.musicData = musicBendi;
+        } 
+    
+        if (this.wangyiyunType == 'wangyiyun') { //网易云回显
+          console.log('wangyiyun',musicWangyi);
+          this.ruleForm.radioMusic = musicWangyi.map(n => { 
             return {
               mediaType: n.mediaType,
               sourceType: n.sourceType,
@@ -1516,15 +1565,17 @@ export default {
       if (this.radioImg == 1) {
         this.ruleForm.radioImg = this.imgData;
       }
-      if (this.radioMusic == 1) {
-        this.ruleForm.radioMusic = this.musicData;
-      }
+      // if (this.radioMusic == 1) {
+      //   this.ruleForm.radioMusic = this.musicData;
+      // }
       if (this.radioVideo == 1) {
         this.ruleForm.radioVideo = this.videoData;
       }
-      let data = this.ruleForm.radioImg
+      let data = this.ruleForm.radioImg  //图片,音乐，视频给后端传的值
         .concat(this.ruleForm.radioMusic)
+        .concat(this.musicData)
         .concat(this.ruleForm.radioVideo);
+        console.log(data);
       let a = [];
       let b = this.ruleForm.processesList.map(n => {
         if (n.title != "") {
@@ -1566,6 +1617,7 @@ export default {
         this.$refs["ruleForm"].validate(async valid => {
           if (valid) {
             if (this.type == "add") {
+              // return;
               var res = await addJbInfo(this.ruleForm);
               if (res.code == 200) {
                 this.$message.success("新增成功");
@@ -1679,9 +1731,12 @@ export default {
       // console.log(res, file, "成功了吗");
     },
     //上传图片
-    async uploadImg(file, fileList) {
+    async uploadImg(e,file, fileList) {
+      console.log('进度',parseInt(e.percent));
+     
       this.loadingCover=true;//显示加载
-      this.jinduCoverNum=0;//进度从0开始
+      // this.jinduCoverNum= parseInt(e.percent);//进度从0开始
+      this.jinduCoverNum = Math.floor(e.percent);//进度从0开始
       this.jinduShowCover=true;//显示进度条
       try {
         let formData = new FormData();
@@ -1692,49 +1747,35 @@ export default {
         // this.ruleForm.cover = res.data.wjUrl;
         this.$set(this.ruleForm, "cover", res.data.wjUrl);
         this.loadingCover=false;
-        clearInterval(this.videoTime); //清除定时器
-        this.videoTime = null; //清除定时器
-        this.successVideo('cover')
+        if (this.jinduCoverNum >= 100) {
+					this.jinduCoverNum = 100
+					setTimeout(() => {
+						this.jinduShowCover = false;
+					}, 1000) // 一秒后关闭进度条
+				}
+        // this.successVideo('cover')
       } catch (err) {}
-       let videoJindu1 = setTimeout(() => {
-        this.jinduVideoNum = 30;
-      }, 500);
-      let videoJindu2 = setTimeout(() => {
-        videoJindu1
-        this.jinduVideoNum = 69;
-      }, 1000);
-      this.videoTime = setTimeout(() => {
-        videoJindu2
-        this.jinduVideoNum = 94;
-      }, 1500);
-
     },
     //其他图片
-    changeImgs({ file }) {
+    // changeImgs({ file }) {
+    changeImgs(e,file) {
+      console.log('其他图片进度',parseInt(e.percent));
       this.loadingOtherImg = true; //显示加载
-      this.jinduOtherImgNum = 0;//进度条从0开始
+      this.jinduOtherImgNum = parseInt(e.percent);//进度条从0开始
       this.jinduShowOtherImg = true; //是否显示进度条
       let formData = new FormData();
-      formData.append("file", file);
+      formData.append("file", file.raw);
       formData.append("type", "product");
       uploadFile(formData).then(res => {
         this.dataImg.push(res.data.wjUrl);
         this.loadingOtherImg = false; //显示加载
-        clearInterval(this.videoTime); //清除定时器
-        this.videoTime = null; //清除定时器
-        this.successVideo('otherImg'); //
+        if (this.jinduOtherImgNum >= 100) {
+					this.jinduOtherImgNum = 100
+					setTimeout(() => {
+						this.jinduShowOtherImg = false;
+					}, 1000) // 一秒后关闭进度条
+				}
       });
-      let videoJindu1 = setTimeout(() => {
-        this.jinduVideoNum = 30;
-      }, 500);
-      let videoJindu2 = setTimeout(() => {
-        videoJindu1
-        this.jinduVideoNum = 80;
-      }, 1000);
-      this.videoTime = setTimeout(() => {
-        videoJindu2
-        this.jinduVideoNum = 90;
-      }, 1500);
     },
     beforeAvatarUpload(file) {
       const isJPG = file.type;
@@ -1941,8 +1982,8 @@ export default {
     },
     changeMusic(val) {
       this.radioMusic = val;
-      this.ruleForm.radioMusic = [];
-      this.musicData = [];
+      // this.ruleForm.radioMusic = [];
+      // this.musicData = [];
     },
     changeVideo(val) {
       this.radioVideo = val;
@@ -2005,14 +2046,16 @@ export default {
       }
     },
     // 上传资源图片
-    labeluploadimg({ file }) {
+    // labeluploadimg({ file }) {
+    labeluploadimg(e, file ) {
+      console.log('上传资源图片进度',parseInt(e.percent));
       console.log(file);
       const formdata = new FormData();
-      formdata.append("file", file);
+      formdata.append("file", file.raw);
       formdata.append("type", "product");
       this.loadingImg = true;
       this.jinduShowImg = true;
-      this.jinduImgNum = 0;
+      this.jinduImgNum = parseInt(e.percent);
       this.radioImg = 1;
       uploadFile(formdata).then(res => {
         this.imgData.push({
@@ -2026,32 +2069,25 @@ export default {
         });
         this.imgType = true;
         this.loadingImg = false;
-        // this.jinduImgNum = 100;
-        this.jinduShowImg = false;
-        clearInterval(this.videoTime);
-        this.videoTime = null;
-        this.successVideo('img');
+        if (this.jinduImgNum >= 100) {
+					this.jinduImgNum = 100
+					setTimeout(() => {
+						this.jinduShowImg = false;
+					}, 1000) // 一秒后关闭进度条
+				}
       });
-       let videoJindu1 = setTimeout(() => {
-        this.jinduImgNum = 30;
-      }, 500);
-      let videoJindu2 = setTimeout(() => {
-        videoJindu1
-        this.jinduImgNum = 80;
-      }, 1000);
-      this.videoTime = setTimeout(() => {
-        videoJindu2
-        this.jinduImgNum = 99;
-      }, 1500);
     },
     //音频
-    labeluploadmusic({ file }) {
+    // labeluploadmusic({ file }) {
+    labeluploadmusic(e,file) {
+      console.log('音频进度',parseInt(e.percent));
       this.radioMusic = 1;
       this.loadingAudio = true;
       this.jinduShowAudio = true;
-       this.jinduAudioNum = 0;
+      
+       this.jinduAudioNum = parseInt(e.percent);
       const formdata = new FormData();
-      formdata.append("file", file);
+      formdata.append("file", file.raw);
       formdata.append("type", "product");
       uploadFile(formdata).then(res => {
         this.musicData.push({
@@ -2064,35 +2100,29 @@ export default {
         });
         this.loadingAudio = false;
         this.musicType = true;
-        // this.jinduAudioNum = 100;
-        // this.jinduShowAudio = false;
-        clearInterval(this.videoTime);
-        this.videoTime = null;
-        this.successVideo('audio');
+        if (this.jinduAudioNum >= 100) {
+					this.jinduAudioNum = 100
+					setTimeout(() => {
+						this.jinduShowAudio = false;
+					}, 1000) // 一秒后关闭进度条
+				}
       });
-      let videoJindu1 = setTimeout(() => {
-        this.jinduAudioNum = 30;
-      }, 500);
-      let videoJindu2 = setTimeout(() => {
-        videoJindu1
-        this.jinduAudioNum = 80;
-      }, 1000);
-      this.videoTime = setTimeout(() => {
-        videoJindu2
-        this.jinduAudioNum = 98;
-      }, 1500);
     },
     //视频
-    labeluploadvideo({ file }) {
-      this.videoTime
+    // labeluploadvideo({ file }) {
+    labeluploadvideo( e,file ) {
+      this.jinduVideoNum = parseInt(e.percent);
+
       this.loading = true;
       this.radioVideo = 1;
       this.jinduShowVideo = true;
-      this.jinduVideoNum = 0;
+  // console.log(file.raw, 'file.rawfile.rawfile.raw');
+      // this.jinduVideoNum = 0;
       const formdata = new FormData();
-      formdata.append("file", file);
+      formdata.append("file", file.raw);
       formdata.append("type", "product");
       uploadFile(formdata).then(res => {
+        console.log(res);
         this.videoData.push({
           url: res.data.wjUrl,
           processNames: "",
@@ -2103,63 +2133,13 @@ export default {
         });
         this.loading = false; //取消加载
         this.radioType = true;
-        // this.jinduVideoNum = 100;
-        // this.jinduShowVideo = false;
-        clearInterval(this.videoTime);
-        this.videoTime = null;
-        this.successVideo('video');
-        // this.findvideocover(res.data.wjUrl, file);
-      });
-      let videoJindu1 = setTimeout(() => {
-        this.jinduVideoNum = 30;
-      }, 500);
-      let videoJindu2 = setTimeout(() => {
-        videoJindu1
-        this.jinduVideoNum = 80;
-      }, 1000);
-      this.videoTime = setTimeout(() => {
-        videoJindu2
-        this.jinduVideoNum = 90;
-      }, 1500);
-    },
-    successVideo(type){
-      console.log('上传成功');
-      switch (type) {
-        case 'cover': //封面
-          this.jinduCoverNum = 100;
-          setTimeout(() => {
-            this.jinduShowCover = false;
-          }, 1200);
-          break;
-        case 'otherImg': //其他图片
-          this.jinduOtherImgNum = 100;
-          setTimeout(() => {
-            this.jinduShowOtherImg = false;
-          }, 1200);
-          break;
-        case 'img':
-          this.jinduImgNum = 100;
-          setTimeout(() => {
-            this.jinduShowImg = false;
-          }, 1200);
-          break;
-        case 'audio':
-          console.log('音频');
-          this.jinduAudioNum = 100;
-          setTimeout(() => {
-            this.jinduShowAudio = false;
-          }, 1200);
-          break;
-        case 'video':
-          this.jinduVideoNum = 100;
-          setTimeout(() => {
-            this.jinduShowVideo = false;
-          }, 1200);
-          break;
-      }
-      // setTimeout(() => {
-      //   this.jinduShowVideo = false;
-      // }, 800);
+         if (this.jinduVideoNum >= 100) {
+					this.jinduVideoNum = 100
+					setTimeout(() => {
+						this.jinduShowVideo = false;
+					}, 1000) // 一秒后关闭进度条
+				}
+      }) 
     },
     delDataImg(item, index) {
       this.$confirm("此操作将永久删除图片,是否继续?", "提示", {
@@ -2396,9 +2376,9 @@ export default {
 .avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
-  width: 178px;
+  /* width: 178px;
   height: 178px;
-  line-height: 178px;
+  line-height: 178px; */
   text-align: center;
 }
 .avatar {