上传视频

src/App.vue

@@ -7,18 +7,19 @@
       <right-panel></right-panel>
     </body>
     <modal-layer></modal-layer>
+    <uploader></uploader>
   </div>
 </template>
 
 <script>
 import CommonHeader from '@/components/header/index.vue'
-import ModalLayer from '@/components/modal/modalLayer.vue'
 export default {
   components: {
     CommonHeader,
-    ModalLayer,
     SideNav: () => import('@/components/sideNav/index.vue'),
-    RightPanel: () => import('@/components/rightPanel/index.vue')
+    RightPanel: () => import('@/components/rightPanel/index.vue'),
+    ModalLayer: () => import('@/components/modal/modalLayer.vue'),
+    Uploader: () => import('@/components/misc/uploader.vue')
   },
   data() {
     return {}
@@ -32,21 +33,21 @@ export default {
 
 <style lang="scss">
 #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    position: relative;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
 }
 
 .body-container {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    overflow: hidden;
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
 }
 </style>

src/components/misc/uploader.vue

+<template>
+  <div>
+    <input
+      id="video-input"
+      ref="videoInput"
+      type="file"
+      accept="video/mp4, video/NMP4"
+      @change="onVideoInputChange"
+      @click="onInputClick"
+    >
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'Vuex'
+export default {
+  data() {
+    return {
+      videoInput: {}
+    }
+  },
+  mounted() {
+    this.videoInput = this.$refs.videoInput
+  },
+  methods: {
+    ...mapActions({
+      upload: 'uploader/upload'
+    }),
+    onVideoInputChange() {
+      let file = this.videoInput.files[0]
+      console.log('turbo: onVideoInputChange -> file', file)
+    },
+    onInputClick() {
+      const vm = this
+      window.addEventListener('focus', function h() {
+        vm.clearInputValue(vm.videoInput)
+        console.log('turbo: h -> this.videoInput', vm.videoInput)
+        window.removeEventListener('focus', h)
+      })
+    },
+    clearInputValue(el) {
+      if (el) {
+        el.value = ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/modal/selectContent.vue

@@ -6,18 +6,39 @@
     >
       close
     </div>
-    选择视频
+    <div>选择视频</div>
+    <ul>
+      <li
+        v-for="(item, i) in items"
+        :key="i"
+        class="item"
+        @click="itemClick({ item, index: i })"
+      >
+        {{ item.text }}
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      items: [{ text: '本地上传', type: 'upload' }, { text: '视频库' }, { text: '我的作品' }]
+    }
   },
   methods: {
     close() {
       this.$modal.hide('selectModal')
+    },
+    triggerUpload() {
+      const el = document.getElementById('video-input')
+      el && el.click()
+    },
+    itemClick({ item = {} } = {}) {
+      if (item.type === 'upload') {
+        this.triggerUpload()
+      }
     }
   }
 }

src/store/index.js

@@ -3,12 +3,14 @@ import Vuex from 'vuex'
 
 import global from './global'
 import moduleA from './modules/moduleA'
+import uploader from './modules/uploader'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   ...global,
   modules: {
-    moduleA
+    moduleA,
+    uploader
   }
 })

src/store/modules/uploader.js

+// 模块化vuex数据
+// getter调用示例：this.$store.getters['moduleA/moduleState']
+
+const state = {
+  video: {}
+}
+
+const getters = {
+  video: (state) => state.video
+}
+
+const mutations = {}
+
+const actions = {
+  async upload(store, payload) {
+    console.log('turbo: upload -> store, payload', store, payload)
+  },
+  async storeMaterial() {}
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}