更新上传相关组件

src/components/upload/filepond-image.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-
     <file-pond
       ref="pond"
       name="file"
@@ -9,20 +8,24 @@
       label-file-processing-aborted="图片上传被取消"
       label-tap-to-retry="尝试重试"
       label-file-processing-complete="图片上传成功！"
+      label-max-file-size="上传的图片大小不能超过 10MB"
+      label-max-file-size-exceeded="上传的图片大小不能超过 10MB"
+      allow-file-size-validation="true"
+      max-file-size="10MB"
       accepted-file-types="image/png, image/jpeg, image/jpg, image/gif"
-      :imagePreviewHeight="32"
       :allow-multiple="true"
       :max-files="9"
       :server="server"
       :instant-upload="true"
       @init="handleFilePondInit"
       @processfile="success"
+      @removefile="removeFile"
     />
   </div>
 </template>
 
 <script>
-import vueFilePond from 'vue-filepond'
+import VueFilePond from 'vue-filepond'
 import 'filepond/dist/filepond.min.css'
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
 import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
@@ -30,12 +33,11 @@ import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
 import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size'
 
 // Create component
-const FilePond = vueFilePond(
+const FilePond = VueFilePond(
   FilePondPluginFileValidateType,
   FilePondPluginImagePreview,
   FilePondPluginFileValidateSize
 )
-
 var resp = ''
 
 export default {
@@ -46,12 +48,17 @@ export default {
   resp,
   data() {
     return {
+      imgMap: {},
       server: {
         url: '//file.reghao.cn/api/file/upload/image',
+        revert: null,
         process: {
           headers: {
             'Authorization': this.$store.getters.token
           },
+          ondata(formData) {
+            return formData
+          },
           onload(response) {
             resp = JSON.parse(response)
           }
@@ -65,8 +72,31 @@ export default {
     handleFilePondInit() {
       // FilePond instance methods are available on `this.$refs.pond`
     },
-    success() {
+    success(error, metadata) {
+      if (error === null) {
+        const file = metadata.file
+        const filename = file.name
+        this.imgMap[filename] = resp.data.uploadId
+      }
       this.$emit('resp', resp)
+    },
+    removeFile(error, metadata) {
+      if (error === null) {
+        const file = metadata.file
+        const uploadId = this.imgMap[file.name]
+        fetch('http://file.reghao.cn/api/file/rm/' + uploadId, {
+          headers: {
+            'Authorization': this.$store.getters.token
+          },
+          method: 'DELETE'
+        }).then(response => response.json())
+          .then(json => {
+            console.log(json)
+          })
+          .catch(e => {
+            return null
+          })
+      }
     }
   }
 }

src/components/upload/filepond-upload.vue

@@ -4,10 +4,10 @@
       ref="pond"
       name="file"
       label-idle="选择视频或者拖动视频到此处"
-      label-file-processing="视频正在上传，请稍后"
+      label-file-processing="正在上传视频"
       label-file-processing-aborted="视频上传被取消"
-      label-tap-to-retry="尝试重试"
-      label-file-processing-complete="视频上传成功！"
+      label-tap-to-retry="重新上传"
+      label-file-processing-complete="视频已上传"
       accepted-file-types="video/*, .flv, .mkv"
       :allow-multiple="false"
       :instant-upload="true"
@@ -20,49 +20,36 @@
 </template>
 
 <script>
-// Import Vue FilePond
 import vueFilePond from 'vue-filepond'
-// Import FilePond styles
 import 'filepond/dist/filepond.min.css'
-// Import FilePond plugins
-// Please note that you need to install these plugins separately
-// Import image preview plugin styles
-import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
-// Import image preview and file type validation plugins
 import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
-import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
 
 // Create component
-const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview)
-
-let videMessage = {}
+const FilePond = vueFilePond(FilePondPluginFileValidateType)
+var resp = ''
 
 export default {
   name: 'FilePondUpdate',
   components: {
     FilePond
   },
-  videMessage,
+  resp,
   data() {
     return {
-      videMessage: {},
       myFiles: [],
       server: {
         url: 'http://file.reghao.cn' + '/api/file/upload/video',
         timeout: 600_000,
+        revert: null,
         process: {
           headers: {
-            'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
+            'Authorization': this.$store.getters.token
           },
           ondata: (formData) => {
-            // TODO 根据登录状态获取 userId
-            formData.append('uploadId', '1a2b3c4d5e6f')
             return formData
           },
           onload(res) {
-            var resp = JSON.parse(res)
-            // 返回上传数据
-            videMessage = resp
+            resp = JSON.parse(res)
           }
         }
       }
@@ -76,10 +63,7 @@ export default {
       // FilePond instance methods are available on `this.$refs.pond`
     },
     success() {
-      this.$emit('video', videMessage)
-    },
-    cancelUpload() {
-      console.log('取消上传的文件')
+      this.$emit('resp', resp)
     }
   }
 }

src/views/studio/upload.vue

@@ -12,8 +12,7 @@
         </v-row>
         <v-row justify="center">
           <v-col cols="10">
-            <!-- <v-file-input prepend-icon="mdi-video" show-size counter accept="video/*,.flv" chips label="请选择视频文件" @change="setFile" /> -->
-            <FilePondUpload @video="videoUploadCallback" />
+            <FilePondUpload @video="uploadCallback" />
           </v-col>
         </v-row>
         <v-row justify="center">
@@ -31,8 +30,8 @@
             <v-file-input
               :rules="rules"
               accept="image/png, image/jpeg, image/bmp"
-              placeholder="上传视频封面"
               prepend-icon="mdi-camera"
+              placeholder="上传视频封面"
               label="封面"
               @change="setFile"
             />
@@ -95,15 +94,14 @@
           </v-col>
         </v-row>
       </v-card>
-
     </v-col>
+
     <v-snackbar
       v-model="showMessage"
       :top="true"
       :timeout="3000"
     >
       {{ message }}
-
       <template v-slot:action="{ attrs }">
         <v-btn
           color="pink"
@@ -130,12 +128,23 @@ export default {
       rules: [
         value => !value || value.size < 2000000 || 'Avatar size should be less than 2 MB!'
       ],
+      videoPost: {
+        videoUploadId: null,
+        videoUrl: null,
+        coverUploadId: null,
+        coverUrl: null,
+        title: '',
+        description: '',
+        duration: 0,
+        categoryId: -1,
+        tags: []
+      },
       // 提交给后端的数据
       videoInfo: {
         videoId: '',
+        coverUrl: '',
         title: '',
         description: '',
-        coverUrl: '',
         duration: 0,
         categoryId: -1,
         tags: [],
@@ -197,8 +206,9 @@ export default {
       this.files.push(value)
     },
     // filepond 组件上传文件完成时调用
-    videoUploadCallback(value) {
-      if (value.code === 0) {
+    uploadCallback(value) {
+      console.log(value)
+      /* if (value.code === 0) {
         this.videoInfo.videoId = value.data.videoId
         this.setTitle(value.data.filename)
         this.videoInfo.duration = value.data.duration
@@ -208,14 +218,13 @@ export default {
         this.message = '视频上传成功'
         this.showMessage = true
       } else {
-        // TODO 返回错误原因，网络错误或是服务端错误
         if (value.msg != null) {
           this.message = '上传文件出现异常，请重新上传！' + value.msg
         } else {
           this.message = '上传文件出现异常，请重新上传！'
         }
         this.showMessage = true
-      }
+      }*/
     },
     setTitle(title) {
       if (title.length > 50) {