图片发布接口

src/api/mblog/status.js

@@ -1,16 +1,16 @@
 import $axios from '../index'
 
 const statusApi = {
-  statusRecommendApi: '/api/mblog/status',
-  statusSubmitApi: '/api/mblog/status'
+  statusPubApi: '/api/mblog/status',
+  statusRecommendApi: '/api/mblog/status'
+}
+
+// 状态发布接口
+export function pubStatus(statusPost) {
+  return $axios.post(statusApi.statusPubApi, statusPost)
 }
 
 // 状态获取接口
 export function statusRecommend(page) {
   return $axios.get(statusApi.statusRecommendApi + '/' + page)
 }
-
-// 状态发布接口
-export function submitStatus(videoPost) {
-  return $axios.post(statusApi.statusSubmitApi, videoPost)
-}

src/components/upload/filepond-image.vue

@@ -3,99 +3,58 @@
 
     <file-pond
       ref="pond"
-      name="file[]"
+      name="file"
       label-idle="选择图片或拖动图片到此处"
       label-file-processing="图片正在上传，请稍后"
       label-file-processing-aborted="图片上传被取消"
       label-tap-to-retry="尝试重试"
       label-file-processing-complete="图片上传成功！"
-      :allow-multiple="false"
       accepted-file-types="image/png, image/jpeg, image/jpg, image/gif"
+      :allow-multiple="true"
+      :max-files="9"
       :server="server"
-      :files="myFiles"
-      :instant-upload="false"
-      :image-edit-editor="editor"
-      :image-edit-instant-edit="true"
+      :instant-upload="true"
       @init="handleFilePondInit"
       @processfile="success"
     />
-    <!-- :instant-upload="false" 关闭立即上传到服务器 -->
   </div>
 </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 'filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css'
-// Import image preview and file type validation plugins
 import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
-import FilePondPluginImageEdit from 'filepond-plugin-image-edit'
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
-import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'
 import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size'
+
 // Create component
 const FilePond = vueFilePond(
   FilePondPluginFileValidateType,
   FilePondPluginImagePreview,
-  FilePondPluginImageExifOrientation,
-  FilePondPluginFileValidateSize,
-  FilePondPluginImageEdit
+  FilePondPluginFileValidateSize
 )
 
-let videMessage = {}
+var resp = ''
 
 export default {
-  name: 'FilePondUpdate',
+  name: 'FilePondImage',
   components: {
     FilePond
   },
-  videMessage,
+  resp,
   data() {
     return {
-      videMessage: {},
-      myFiles: [],
       server: {
-        url: '/api/file/upload/image',
+        url: '//file.reghao.cn/api/file/upload/image',
         process: {
           headers: {
-            'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
+            'Authorization': this.$store.getters.token
           },
           onload(response) {
-            // 返回上传数据
-            videMessage = JSON.parse(response)
+            resp = JSON.parse(response)
           }
         }
-      },
-      editor: {
-
-        // Called by FilePond to edit the image
-        // - should open your image editor
-        // - receives file object and image edit instructions
-        open: (file, instructions) => {
-        // open editor here
-        },
-
-        // Callback set by FilePond
-        // - should be called by the editor when user confirms editing
-        // - should receive output object, resulting edit information
-        onconfirm: (output) => {},
-
-        // Callback set by FilePond
-        // - should be called by the editor when user cancels editing
-        oncancel: () => {},
-
-        // Callback set by FilePond
-        // - should be called by the editor when user closes the editor
-        onclose: () => {}
       }
     }
   },
@@ -103,11 +62,10 @@ export default {
   },
   methods: {
     handleFilePondInit() {
-      // console.log('FilePond has initialized')
       // FilePond instance methods are available on `this.$refs.pond`
     },
     success() {
-      this.$emit('photo', videMessage)
+      this.$emit('resp', resp)
     }
   }
 }

src/components/upload/filepond-upload.vue

@@ -32,8 +32,6 @@ import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css
 import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
 
-import CryptoJS from 'crypto-js'
-
 // Create component
 const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview)
 
@@ -58,7 +56,7 @@ export default {
           },
           ondata: (formData) => {
             // TODO 根据登录状态获取 userId
-            formData.append('userId', 1101269176320)
+            formData.append('uploadId', '1a2b3c4d5e6f')
             return formData
           },
           onload(res) {
@@ -82,49 +80,6 @@ export default {
     },
     cancelUpload() {
       console.log('取消上传的文件')
-    },
-    // TODO 计算文件的 sha256 值，然后传递给后端做判断后再确定是否需要上传文件
-    uploadCrt(param) {
-      var contractFile = param.file
-      var reader = new FileReader(); var self = this
-      var blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice
-      var chunkSize = 6 * 1024 * 1024
-      var chunks = Math.ceil(contractFile.size / chunkSize)
-      var currentChunk = 0
-      var hasher = CryptoJS.algo.SHA256.create()
-      var start = currentChunk * chunkSize
-      var end = start + chunkSize >= contractFile.size ? contractFile.size : start + chunkSize
-      reader.readAsArrayBuffer(blobSlice.call(contractFile, start, end))
-      reader.onload = function(evt) {
-        var fileStr = evt.target.result
-        var tmpWordArray = self.arrayBufferToWordArray(fileStr)
-        hasher.update(tmpWordArray)
-        currentChunk += 1
-        fileStr = null
-        tmpWordArray = null
-        if (currentChunk < chunks) {
-          var start = currentChunk * chunkSize
-          var end = start + chunkSize >= contractFile.size ? contractFile.size : start + chunkSize
-          reader.readAsArrayBuffer(blobSlice.call(contractFile, start, end))
-        }
-      }
-      reader.onloadend = function() {
-        contractFile = null
-        var hash = hasher.finalize()
-        hash.toString()// 计算结果
-        hasher = null
-        blobSlice = null
-        reader = null
-        hash = null
-      }
-    },
-    arrayBufferToWordArray(ab) {
-      var i8a = new Uint8Array(ab)
-      var a = []
-      for (var i = 0; i < i8a.length; i += 4) {
-        a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3])
-      }
-      return CryptoJS.lib.WordArray.create(a, i8a.length)
     }
   }
 }

src/components/upload/upload-image.vue

@@ -0,0 +1,120 @@
+<template>
+  <v-row justify="center" align="center">
+    <v-col>
+      <v-card
+        class="mx-auto"
+        outlined
+      >
+        <v-row justify="center">
+          <v-col cols="10">
+            <h2>发布图片贴</h2>
+          </v-col>
+        </v-row>
+        <v-row justify="center">
+          <v-col cols="10">
+            <!-- 接收 filepond-image 中 this.$emit('resp', resp) 的数据 -->
+            <FilePondUploadImage @resp="uploadCallback" />
+          </v-col>
+        </v-row>
+        <v-row justify="center">
+          <v-col cols="10">
+            <v-text-field
+              v-model="statusPost.content"
+              label="内容(50字以内)"
+              placeholder="写点什么吧..."
+              clearable
+              :rules="[() => statusPost.content !== '' || '内容不能为空']"
+            />
+          </v-col>
+        </v-row>
+        <v-row justify="center">
+          <v-col cols="10">
+            <v-btn large color="primary" @click="publish">发布</v-btn>
+          </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"
+          text
+          v-bind="attrs"
+          @click="showMessage = false"
+        >
+          关闭
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </v-row>
+</template>
+
+<script>
+import FilePondUploadImage from '@/components/upload/filepond-image.vue'
+import { pubStatus } from '@/api/mblog/status'
+
+export default {
+  components: {
+    FilePondUploadImage
+  },
+  data() {
+    return {
+      // 提交给后端的数据
+      statusPost: {
+        uploadIds: [],
+        content: ''
+      },
+      showMessage: false,
+      message: ''
+    }
+  },
+  created() {
+  },
+  methods: {
+    uploadCallback(resp) {
+      if (resp.code === 0) {
+        this.statusPost.uploadIds.push(resp.data.uploadId)
+      } else {
+        if (resp.msg != null) {
+          this.message = '上传文件出现异常，请重新上传！' + resp.msg
+        } else {
+          this.message = '上传文件出现异常，请重新上传！'
+        }
+        this.showMessage = true
+      }
+    },
+    publish() {
+      if (this.statusPost.content === '') {
+        this.message = '内容不能为空'
+        this.showMessage = true
+      }
+
+      pubStatus(this.statusPost)
+        .then(res => {
+          if (res.code === 0) {
+            this.message = '状态已发布'
+            this.showMessage = true
+
+            this.$router.push('/mblog')
+          } else {
+            this.message = res.msg
+            this.showMessage = true
+          }
+        })
+        .catch(error => {
+          this.message = error.message
+          this.showMessage = true
+        })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/components/upload/upload-photo.vue

@@ -1,23 +0,0 @@
-<template>
-  <v-row justify="center" align="center">
-    <v-col>
-      <v-card
-        class="mx-auto"
-        outlined
-      >
-        图片投稿开发中
-      </v-card>
-    </v-col>
-  </v-row>
-</template>
-
-<script>
-export default {
-  name: 'UploadPhoto'
-
-}
-</script>
-
-<style>
-
-</style>

src/views/studio/upload.vue

@@ -1,23 +1,24 @@
 <template>
   <v-container fill-height>
     <v-tabs>
-      <v-tab @click="setShow(0)">视频</v-tab>
-      <v-tab @click="setShow(1)">图片</v-tab>
-      <v-tab @click="setShow(3)">音乐</v-tab>
-      <v-tab @click="setShow(2)">文章</v-tab>
+      <v-tab @click="setShow(0)">图片</v-tab>
+      <v-tab @click="setShow(1)">视频</v-tab>
+      <v-tab @click="setShow(2)">音乐</v-tab>
+      <v-tab @click="setShow(3)">文章</v-tab>
     </v-tabs>
-    <VideoUpload v-if="show == 0" />
-    <VideoPhoto v-if="show == 1" />
-    <VideoArticle v-if="show == 2" />
-    <VideoMusic v-if="show == 3" />
+    <VideoPhoto v-if="show === 0" />
+    <VideoUpload v-if="show === 1" />
+    <VideoMusic v-if="show === 2" />
+    <VideoArticle v-if="show === 3" />
   </v-container>
 </template>
 
 <script>
 import VideoUpload from '@/components/upload/upload-video.vue'
-import VideoPhoto from '@/components/upload/upload-photo.vue'
+import VideoPhoto from '@/components/upload/upload-image.vue'
 import VideoArticle from '@/components/upload/upload-article.vue'
 import VideoMusic from '@/components/upload/upload-music.vue'
+
 export default {
   name: 'Upload',
   components: {
@@ -40,5 +41,4 @@ export default {
 </script>
 
 <style>
-
 </style>