feat(oss): support upload folder

labring · Apr 21, 2022 · a2049fb · a2049fb
1 parent d8925a2
commit a2049fb
Showing 1 changed file with 24 additions and 5 deletions.
diff --git a/packages/app-console/src/views/storage/files.vue b/packages/app-console/src/views/storage/files.vue
@@ -5,10 +5,16 @@
       <el-button size="mini" plain class="filter-item" type="primary" icon="el-icon-refresh" @click="handleFilter">
         刷新
       </el-button>
-      <el-button size="mini" plain class="filter-item" type="primary" icon="el-icon-upload" @click="dialogFormVisible = true">
-        上传文件
-      </el-button>
-      <el-button size="mini" plain class="filter-item" type="default" icon="el-icon-new" @click="createDirectory">
+      <el-dropdown trigger="click" size="mini" class="filter-item" style="margin-left: 10px; margin-right: 10px;" @command="handleUploadCommand">
+        <el-button size="mini" plain type="primary">
+          <i class="el-icon-upload el-icon--left"></i>上传<i class="el-icon-arrow-down el-icon--right"></i>
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="uploadFile">上传文件</el-dropdown-item>
+          <el-dropdown-item command="uploadFolder">上传文件夹</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-button size="mini" plain class="filter-item" type="primary" icon="el-icon-new" @click="createDirectory">
         新建文件夹
       </el-button>
       <div class="filter-item" style="margin-left: 20px;">
@@ -94,6 +100,7 @@
       <el-upload
         v-if="bucketDetail.credentials"
         drag
+        multiple
         action=""
         :auto-upload="true"
         :http-request="uploadFile"
@@ -238,9 +245,21 @@ export default {
       assert(file && file.Key, 'invalid file or filename')
       return file.Key.split('/').at(-1)
     },
+    handleUploadCommand (command) {
+      this.dialogFormVisible = true
+      if (command === 'uploadFolder') {
+        this.$nextTick(() => {
+          document.getElementsByClassName('el-upload__input')[0].webkitdirectory = true
+        })
+      } else {
+        this.$nextTick(() => {
+          document.getElementsByClassName('el-upload__input')[0].webkitdirectory = false
+        })
+      }
+    },
     async uploadFile(param) {
       const file = param.file
-      const key = this.currentPath + file.name
+      const key = this.currentPath + (file.webkitRelativePath ? file.webkitRelativePath : file.name)
       const res = await oss.uploadAppFile(this.bucket, key, file, this.bucketDetail.credentials, { contentType: file.type })
       if (res.$response?.httpResponse?.statusCode !== 200) {
         return showError('文件上传失败：' + key)