上传音视频

src/components/weChat/weChatResource.vue

@@ -10,18 +10,21 @@
         <li class="media-nav js_top" :class="type === 'image' ? 'media-current-nav' : ''"  @click="getMediaType('image')">
           <a href="javascript:void(0);">图片<br /></a>
         </li>
-        <!--<li class="media-nav js_top" :class="type === 'audio' ? 'media-current-nav' : ''" @click="getMediaType('audio')">-->
-          <!--<a href="javascript:void(0);">语音<br /></a>-->
-        <!--</li>-->
-        <!--<li class="media-nav js_top" :class="type === 'video' ? 'media-current-nav' : ''" @click="getMediaType('video')">-->
-          <!--<a href="javascript:void(0);">视频<br /></a>-->
-        <!--</li>-->
+        <li class="media-nav js_top" :class="type === 'voice' ? 'media-current-nav' : ''" @click="getMediaType('voice')">
+          <a href="javascript:void(0);">语音<br /></a>
+        </li>
+        <li class="media-nav js_top" :class="type === 'video' ? 'media-current-nav' : ''" @click="getMediaType('video')">
+          <a href="javascript:void(0);">视频<br /></a>
+        </li>
         <!---->
       </ul>
       <div class="media-panel">
         <div class="media-panel-top flex-bt">
           <div class="media-panel-top-left">
-            图片（共{{total}}条）
+            {{typeText[type]}}（共{{total}}条）
+          </div>
+          <div class="progress" v-if="showProgress">
+            <el-progress :percentage="progress" status="success"></el-progress>
           </div>
           <div class="media-panel-top-right">
             <el-upload
@@ -51,10 +54,18 @@
             </el-table-column>
             <el-table-column
               label="URL">
-              <template slot-scope="scope" v-if="type === 'image'">
-                <a :href="scope.row.url">
+              <template slot-scope="scope">
+                <a :href="scope.row.url" v-if="type === 'image'">
                   <img style="width: 60px;" :src="scope.row.url"/>
                 </a>
+                <video v-if="type === 'video'" width="100" height="100" controls="controls">
+                  <source :src="scope.row.url"/>
+                  Your browser does not support the video tag.
+                </video>
+                <audio v-if="type === 'voice'" id="myAudio" controls>
+                  <source :src="scope.row.url"/>
+                  Your browser does not support the audio element.
+                </audio>
               </template>
             </el-table-column>
           </el-table>
@@ -67,6 +78,7 @@
 
 <script>
   import {getMediaListApi,uploadFileApi} from "../../service/api";
+  import page from '../framework/page'
   export default {
       name: "resource",
       data() {
@@ -81,16 +93,31 @@
             type: 'wechat',
             chunk: 0,
             count: 1
+          },
+          fileUid:null,
+          showProgress: false,
+          typeText: {
+            'image' : '图片',
+            'video' : '视频',
+            'voice' : '语音'
           }
         }
       },
+      components:{
+        page
+      },
       mounted(){
         this.getMediaList(this.type)
       },
+      computed:{
+        progress(){
+          return this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num <100 ? this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num : 100
+        }
+      },
       methods: {
         getMediaType(type){
             this.type = type;
-            this.nowPage = 0;
+            this.nowPage = 1;
             this.getMediaList(type);
         },
         getMediaList(type){
@@ -121,9 +148,22 @@
           }
         },
         uploadFile(a) {
+          this.loading = true;
           this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
+          this.fileUid = a.file.uid;
+          this.showProgress = true;
           uploadFileApi({file:a.file,type:'wechat'}).then(res=>{
-            this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
+            this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
+            this.getMediaList(this.type)
+            this.loading = false;
+            this.showProgress = false;
+            this.$message({
+              type: 'success',
+              message: '上传成功!'
+            });
+          }).catch(()=>{
+            this.loading = false;
+            this.showProgress = false;
           })
         }
       }
@@ -131,6 +171,9 @@
 </script>
 
 <style scoped lang="less">
+  .progress {
+    width: 50%;
+  }
   .flex-bt {
     display: flex;
     justify-content: space-between;