PublishFile.vue 中实现 vue-simple-uploader 大文件分片上传

src/api/file.js

@@ -23,6 +23,10 @@ export function getVideoChannelInfo() {
   return post(fileApi.ossServerApi + '/video')
 }
 
+export function getFileChannelInfo() {
+  return post(fileApi.ossServerApi + '/file')
+}
+
 export function getStsToken() {
   return post(fileApi.ossStsApi)
 }

src/components/upload/PublishFile.vue

@@ -27,12 +27,29 @@
           </div>
         </el-card>
       </el-row>
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>文件信息</span>
+          </div>
+          <div class="text item">
+            <el-form ref="form" :model="uploadedFile" label-width="80px">
+              <el-form-item label="UploadId">
+                <el-input v-model="uploadedFile.uploadId" style="width: 70%; padding-right: 10px" readonly />
+              </el-form-item>
+              <el-form-item label="URL">
+                <el-input v-model="uploadedFile.url" type="textarea" style="width: 70%; padding-right: 10px" readonly />
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-row>
     </el-col>
   </el-row>
 </template>
 
 <script>
-import { getVideoChannelInfo } from '@/api/file'
+import { getFileChannelInfo } from '@/api/file'
 import { hashFile } from '@/utils/functions'
 
 export default {
@@ -43,11 +60,15 @@ export default {
       options: null,
       attrs: {
         accept: '*'
+      },
+      uploadedFile: {
+        uploadId: 'null',
+        url: ''
       }
     }
   },
   created() {
-    getVideoChannelInfo().then(res => {
+    getFileChannelInfo().then(res => {
       if (res.code === 0) {
         const resData = res.data
         this.options = {
@@ -61,11 +82,11 @@ export default {
           // 服务器分片校验函数, 秒传及断点续传基础
           checkChunkUploadedByResponse: function(chunk, message) {
             const objMessage = JSON.parse(message)
-            if (objMessage.skipUpload) {
+            const respData = objMessage.data
+            if (respData.skipUpload) {
               return true
             }
-
-            return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
+            return (respData.uploaded || []).indexOf(chunk.offset + 1) >= 0
           },
           query: (file, chunk) => {
             return {
@@ -113,7 +134,6 @@ export default {
 
       file.pause()
       hashFile(file.file).then(result => {
-        console.log(result.sha256sum)
         this.startUpload(result.sha256sum, file)
       })
     },
@@ -127,7 +147,8 @@ export default {
     onFileSuccess(rootFile, file, response, chunk) {
       const resp = JSON.parse(response)
       if (resp.code === 0) {
-        console.log(resp.data)
+        this.uploadedFile.uploadId = resp.data.uploadId
+        this.uploadedFile.url = resp.data.url
         this.$notify({
           title: '提示',
           message: '文件已上传',
@@ -144,7 +165,6 @@ export default {
       }
     },
     onFileError(rootFile, file, response, chunk) {
-      console.log(response)
       // const res = JSON.parse(response)
       this.$notify({
         title: '提示',

src/router/vod.js

@@ -4,8 +4,8 @@ const History = () => import('views/post/History')
 const FavVideo = () => import('views/post/FavlistVideo')
 const FavImage = () => import('views/post/FavlistImage')
 const PostAnalysis = () => import('views/post/PostAnalysis')
-const PostPublishVideo1 = () => import('components/upload/PublishVideo')
-const PostPublishVideo = () => import('components/upload/PublishFile')
+const PostPublishVideo = () => import('components/upload/PublishVideo')
+const PostPublishFile = () => import('components/upload/PublishFile')
 const UserPostVideo = () => import('views/post/VideoPost')
 const PostEditVideo = () => import('components/upload/EditVideo')
 const PostPublishAudio = () => import('components/upload/PublishAudio')
@@ -17,7 +17,6 @@ const PostEditImage = () => import('components/upload/EditImage')
 const PostPublishArticle = () => import('components/upload/PublishArticle')
 const UserPostArticle = () => import('views/post/ArticlePost')
 const PostEditArticle = () => import('components/upload/EditArticle')
-const PostPublishFile = () => import('components/upload/PublishFile')
 
 export default {
   path: '/post',
@@ -44,12 +43,6 @@ export default {
       component: PostPublishArticle,
       meta: { needAuth: true }
     },
-    {
-      path: '/post/publish/file',
-      name: '发布文件',
-      component: PostPublishFile,
-      meta: { needAuth: true }
-    },
     {
       path: '/post/list/audio',
       name: '音频稿件',
@@ -75,6 +68,12 @@ export default {
       meta: { needAuth: true }
     },
     // ********************************************************************************************************************
+    {
+      path: '/post/video/file',
+      name: '发布文件',
+      component: PostPublishFile,
+      meta: { needAuth: true }
+    },
     {
       path: '/post/video/publish',
       name: '发布视频',

src/utils/functions.js

@@ -526,8 +526,8 @@ export function hashFile(file) {
    * 使用指定的算法计算hash值
    */
   function hashFileInternal(file, alog) {
-    // 指定块的大小，这里设置为20MB,可以根据实际情况进行配置
-    const chunkSize = 20 * 1024 * 1024
+    // 指定块的大小，这里设置为10MB,可以根据实际情况进行配置
+    const chunkSize = 10 * 1024 * 1024
     let promise = Promise.resolve()
     // 使用promise来串联hash计算的顺序。因为FileReader是在事件中处理文件内容的，必须要通过某种机制来保证update的顺序是文件正确的顺序
     for (let index = 0; index < file.size; index += chunkSize) {

src/views/post/Post.vue

@@ -46,6 +46,10 @@
               <span slot="title">视频管理</span>
             </template>
             <el-menu-item-group>
+              <el-menu-item index="/post/video/file">
+                <i class="el-icon-files" />
+                <span slot="title">发布文件</span>
+              </el-menu-item>
               <el-menu-item index="/post/video/publish">
                 <i class="el-icon-film" />
                 <span slot="title">发布视频</span>