视频上传

src/utils/upload.js

@@ -10,6 +10,15 @@ export function upload(api, file) {
   return axios.post(api, data, config)
 }
 
+export function uploadVideo(api, file) {
+  var data = new FormData()
+  data.append('videoFile', file)
+  const config = {
+    headers: { 'Authorization': getToken() }
+  }
+  return axios.post(api, data, config)
+}
+
 // 收集库 - 批量导入
 export function BatchImport(api, params) {
   var data = new FormData()

src/views/digitalScreen/module/mediaSetting.vue

@@ -181,12 +181,11 @@
             />
           </el-form-item>
           <div>
-            <el-form-item class="book-cover-upload" label="宣传视频" prop="fileNames">
-              <el-input v-model="videoForm.fileNames" placeholder="请上传" :readonly="true" />
+            <el-form-item class="book-cover-upload" label="宣传视频" prop="videoImg">
+              <el-input v-model="videoForm.videoImg" placeholder="请上传" :readonly="true" />
               <div class="upload-btn">
-                <!-- @change="changeFile($event)" -->
-                <input id="upFile" type="file" name="upFile">
-                <el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />上传</el-button>
+                <input id="upFile" type="file" name="upFile" accept="video/*" @change="changeFile($event)">
+                <el-button :loading="uploadLoading" size="small" type="primary"><i class="iconfont icon-shangchuan" />上传</el-button>
               </div>
             </el-form-item>
           </div>
@@ -204,6 +203,7 @@
 <script>
 import { FetchInitScreenNotice, FetchEditScreenNotice, FetchDeleteScreenNotice, FetchInitScreenPromotionVideo, FetchEditScreenPromotionVideo, FetchDeleteScreenPromotionVideo } from '@/api/digitalScreen/index'
 import { mapGetters } from 'vuex'
+import { uploadVideo } from '@/utils/upload'
 
 export default {
   name: 'MediaSetting',
@@ -237,13 +237,17 @@ export default {
         title: '',
         startTime: '',
         endTime: '',
-        previewUrl: ''
+        videoImg: '',
+        fileNames: ''
       },
       videoPage: {
         page: 0,
         size: 10,
         total: 0
       },
+      file: null,
+      filePath: null,
+      uploadLoading: false,
       rules: {
         title: [
           { required: true, message: '标题不可为空', trigger: 'blur' }
@@ -386,6 +390,7 @@ export default {
             })
           } else {
             this.videoForm.libcode = this.user.fonds.fondsNo
+            delete this.videoForm.fileNames
             console.log('this.videoForm', this.videoForm)
             FetchEditScreenPromotionVideo(this.videoForm).then((res) => {
               if (res.code !== 500) {
@@ -460,6 +465,39 @@ export default {
         }
       })
     },
+    async changeFile(e) {
+      const files = e.target.files
+      if (!files || files.length === 0) return
+
+      const file = files[0]
+      if (file && file.type.startsWith('video/')) {
+        this.uploadLoading = true
+        this.file = file
+
+        uploadVideo(this.baseApi + '/api/fileRelevant/uploadVideo', this.file).then(res => {
+          console.log(res)
+          if (res.data.code === 200) {
+            // this.videoForm.fileNames = this.file.name
+            this.videoForm.videoImg = res.data.data
+          } else {
+            this.$message({ message: '上传失败，请重试', type: 'error', offset: 8 })
+          }
+          this.uploadLoading = false
+        }).catch(err => {
+          this.uploadLoading = false
+          console.error('上传失败', err)
+          this.$message({ message: '上传失败，请重试', type: 'error', offset: 8 })
+        })
+      } else {
+        this.$message({ message: '只可上传视频文件', type: 'error', offset: 8 })
+        e.target.value = ''
+        this.uploadLoading = false
+      }
+
+      setTimeout(() => {
+        e.target.value = ''
+      }, 100)
+    },
     selectionChangeHandler(val) {
       this.selections = val
     },