文件上传组件优化

src/views/common/upLoadComponent.vue

@@ -17,46 +17,34 @@
     <div style="height: calc(100% - 80px);margin-top: 10px">
       <!-- 进度条 -->
       <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
-      <vxe-table
-        border="inner"
-        auto-resize
-        resizable
-        :loading="loading"
-        size="small"
+      <el-table
         ref="uploadTable"
-        show-header-overflow
-        show-overflow
-        highlight-hover-row
-        :menu-config="{}"
-        :print-config="{}"
-        :sort-config="{remote:true}"
-        :data="dataListNew"
-        :checkbox-config="{}">
-        <vxe-column type="seq" width="40"></vxe-column>
-        <vxe-column title="文件名称" field="name" align="center">
-          <template slot-scope="scope">
-            <!--                <div v-if="ifName(scope.row) === true">-->
-            <!--                  <el-image-->
-            <!--                    style="width: 100px; height: 100px"-->
-            <!--                    :src="src"-->
-            <!--                    :preview-src-list="srcList" lazy>-->
-            <!--                  </el-image>-->
-            <!--                </div>-->
-            <!--                <div v-else>-->
-            <!--                  <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>-->
-            <!--                </div>-->
-            <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+        :key="tableKey"
+        :data="dataListNew">
+        <el-table-column type="seq" width="40"></el-table-column>
+        <el-table-column label="文件名称" prop="name" align="center">
+          <template scope="scope">
+            <div v-if="ifName(scope.row) === true">
+              <el-image
+                style="width: 30px; height: 30px;padding-top: 4px"
+                :src="scope.row.lsUrl"
+                :preview-src-list="[scope.row.lsUrl]"
+              ></el-image>
+            </div>
+            <div v-else>
+              <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+            </div>
           </template>
-        </vxe-column>
-        <vxe-column title="创建人" field="createBy.name" align="center"></vxe-column>
-        <vxe-column title="创建时间" field="createDate" align="center"></vxe-column>
-        <vxe-column title="操作" width="200px" fixed="right" align="center">
-          <template  slot-scope="scope">
+        </el-table-column>
+        <el-table-column label="创建人" prop="createBy.name" align="center"></el-table-column>
+        <el-table-column label="创建时间" prop="createDate" align="center"></el-table-column>
+        <el-table-column label="操作" width="200px" fixed="right" align="center">
+          <template  scope="scope">
             <el-button type="text"  icon="el-icon-edit" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
-            <el-button type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$rowIndex)" :disabled="auth==='view'">删除</el-button>
+            <el-button type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'">删除</el-button>
           </template>
-        </vxe-column>
-      </vxe-table>
+        </el-table-column>
+      </el-table>
     </div>
     <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
   </div>
@@ -81,7 +69,6 @@
   export default {
     data () {
       return {
-        loading: false,
         progressFlag: false,
         loadProgress: 0,
         fileList: [],
@@ -92,7 +79,8 @@
         ossService: null,
         auth: '',
         directory: 'public',
-        maxValue: 300
+        maxValue: 300,
+        tableKey: ''
       }
     },
     watch: {
@@ -120,7 +108,7 @@
        * @param maxValue  上传文件允许的最大值，单位：MB
        *    注：值为空时，默认值为300MB
        */
-      newUpload (auth, fileList, directory, maxValue) {
+      async newUpload (auth, fileList, directory, maxValue) {
         if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
           this.directory = directory
         } else {
@@ -132,8 +120,16 @@
           this.maxValue = 300
         }
         this.auth = auth
-        this.dataList = JSON.parse(JSON.stringify(fileList))
-        this.dataListNew = JSON.parse(JSON.stringify(fileList))
+        console.log(this.loading)
+        for await (let item of fileList) {
+          await this.ossService.getTemporaryUrl(item.url).then((data) => {
+            item.lsUrl = data.data
+            this.dataList.push(item)
+            this.dataListNew.push(item)
+          })
+        }
+        // this.dataList = JSON.parse(JSON.stringify(fileList))
+        // this.dataListNew = JSON.parse(JSON.stringify(fileList))
       },
       async httpRequest (file) {
         await httpRequest(file, fileName(file), this.directory, this.maxValue)
@@ -146,10 +142,10 @@
           setTimeout(() => { this.progressFlag = false }, 1000) // 一秒后关闭进度条
         }
       },
-      changes (file, fileList) {
-        if (file.status !== 'ready') {
-          return
-        }
+      async changes (file, fileList) {
+        // if (file.status !== 'ready') {
+        //   return
+        // }
         if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
           this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
           return
@@ -158,7 +154,7 @@
         this.dataList.forEach((item) => {
           this.dataListNew.push(item)
         })
-        fileList.forEach((item) => {
+        for (let item of fileList) {
           item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
           item.createBy = {
             id: '',
@@ -167,12 +163,18 @@
           item.createBy.id = this.$store.state.user.id
           item.createBy.name = this.$store.state.user.name
           this.dataListNew.push(item)
-        })
-        this.dataListNew.forEach(item => {
+        }
+        for await (let item of this.dataListNew) {
           if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
             item.url = item.raw.url
+            if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
+              await this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
+                item.lsUrl = data.data
+              })
+            }
           }
-        })
+        }
+        this.tableKey = Math.random()
       },
       showFile (row) {
         openWindowOnUrl(row)
@@ -209,6 +211,8 @@
        */
       clearUpload () {
         this.$refs.upload.uploadFiles = []
+        this.dataList = []
+        this.dataListNew = []
       },
       /**
        * 获取当前文件列表中的文件数据
@@ -226,6 +230,14 @@
           return true
         }
         return false
+      },
+      ifName (row) {
+        let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
+        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
+          return true
+        } else {
+          return false
+        }
       }
     }
   }