DiskFile.vue 实现了文件上传功能

src/api/disk.js

@@ -4,6 +4,7 @@ const diskApi = {
   createFolderApi: '/api/content/disk/folder/create',
   renameFolderApi: '/api/content/disk/folder/rename',
   getFolderTreeApi: '/api/content/disk/folder/tree',
+  addFileApi: '/api/content/disk/file/add',
   moveFileApi: '/api/content/disk/file/move',
   diskFileApi: '/api/content/disk/file/list',
   filePreviewApi: '/api/content/disk/file/preview',
@@ -32,6 +33,10 @@ export function getFolderTree() {
   return get(diskApi.getFolderTreeApi)
 }
 
+export function addFile(payload) {
+  return post(diskApi.addFileApi, payload)
+}
+
 export function moveFile(payload) {
   return post(diskApi.moveFileApi, payload)
 }

src/views/disk/DiskFile.vue

@@ -183,9 +183,17 @@
       center
     >
       <div>
+        <el-card style="padding: 5px;">
+          <div slot="header" class="clearfix">
+            <span>选择文件目录</span>
+          </div>
+          <div class="text item">
+            <el-tree :data="folderTree" :props="defaultProps" @node-click="handleUploadNodeClick"/>
+          </div>
+        </el-card>
         <uploader
           v-if="options !== null"
-          class="uploader-example"
+          style="padding: 5px;"
           :options="options"
           :auto-start="true"
           @file-added="onFileAdded"
@@ -256,6 +264,7 @@
 
 <script>
 import {
+  addFile,
   addToAlbum,
   createFolder,
   getAlbumKeyValues,
@@ -314,6 +323,12 @@ export default {
       options: null,
       attrs: {
         accept: '*'
+      },
+      uploadForm: {
+        channelCode: null,
+        pid: null,
+        uploadId: null,
+        uploadIds: []
       }
     }
   },
@@ -343,9 +358,6 @@ export default {
         })
         return
       }
-      this.setTitle(file.file.name)
-      this.processVideo(file.file)
-
       file.pause()
       hashFile(file.file).then(result => {
         this.startUpload(result.sha256sum, file)
@@ -358,20 +370,19 @@ export default {
     onFileProgress(rootFile, file, chunk) {
     },
     onFileSuccess(rootFile, file, response, chunk) {
-      const res = JSON.parse(response)
-      if (res.code === 0) {
-        const resData = res.data
-        this.form.videoFileId = resData.uploadId
-        this.$notify({
-          title: '提示',
-          message: '视频已上传',
-          type: 'warning',
-          duration: 3000
+      const resp = JSON.parse(response)
+      if (resp.code === 0) {
+        this.uploadForm.uploadId = resp.data.uploadId
+        // this.uploadForm.uploadIds.push((resp.data.uploadId))
+        addFile(this.uploadForm).then(resp0 => {
+          this.$message.info(resp0.msg)
+        }).catch(error => {
+          this.$message.error(error.message)
         })
       } else {
         this.$notify({
           title: '提示',
-          message: '视频文件上传失败',
+          message: '文件上传失败',
           type: 'warning',
           duration: 3000
         })
@@ -380,19 +391,30 @@ export default {
     onFileError(rootFile, file, response, chunk) {
       this.$notify({
         title: '提示',
-        message: '视频文件上传错误',
+        message: '文件上传错误',
         type: 'warning',
         duration: 3000
       })
     },
     handleUploadClose() {
       this.showUploadDialog = false
+      this.folderTree = []
     },
     onClickUpload() {
+      getFolderTree().then(resp => {
+        if (resp.code === 0) {
+          this.folderTree = resp.data
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+
       getDiskChannelInfo().then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
-          this.form.channelCode = respData.channelCode
+          this.uploadForm.channelCode = respData.channelCode
           this.options = {
             target: respData.ossUrl,
             // 分块大小 10MB
@@ -427,7 +449,7 @@ export default {
           this.$notify({
             title: '提示',
             message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
-            type: 'error',
+            type: 'warning',
             duration: 1000
           })
         }
@@ -435,7 +457,7 @@ export default {
         this.$notify({
           title: '获取 OSS 服务器地址失败, 暂时无法上传文件',
           message: error.message,
-          type: 'warning',
+          type: 'error',
           duration: 1000
         })
       })
@@ -562,6 +584,7 @@ export default {
       for (const item of this.selectedTable) {
         this.moveFileForm.fileIds.push(item.fileId)
       }
+
       getFolderTree().then(resp => {
         if (resp.code === 0) {
           this.folderTree = resp.data
@@ -575,8 +598,11 @@ export default {
     },
     handleNodeClick(data) {
       this.moveFileForm.pid = data.fileId
-      const label = data.label
-      this.$message.info('移动文件到 ' + label + ' 目录')
+      this.$message.info('移动文件到 ' + data.label + ' 目录')
+    },
+    handleUploadNodeClick(data) {
+      this.uploadForm.pid = data.fileId
+      this.$message.info('上传文件到 ' + data.label + ' 目录')
     },
     onMoveToFolder() {
       moveFile(this.moveFileForm).then(resp => {