兰宝车间质量管理系统-前端
疯狂的狮子Li
2023-04-03 1595cb282aab5399862fac6406b5de550863e3b6
src/components/FileUpload/index.vue
@@ -1,3 +1,47 @@
<template>
  <div class="upload-file">
    <el-upload
      multiple
      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
      :limit="limit"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      :on-success="handleUploadSuccess"
      :show-file-list="false"
      :headers="headers"
      class="upload-file-uploader"
      ref="fileUploadRef"
    >
      <!-- 上传按钮 -->
      <el-button type="primary">选取文件</el-button>
    </el-upload>
    <!-- 上传提示 -->
    <div class="el-upload__tip" v-if="showTip">
      请上传
      <template v-if="fileSize">
        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
      </template>
      <template v-if="fileType">
        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
      </template>
      的文件
    </div>
    <!-- 文件列表 -->
    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
        <el-link :href="`${file.url}`" :underline="false" target="_blank">
          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
        </el-link>
        <div class="ele-upload-list__item-content-action">
          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
        </div>
      </li>
    </transition-group>
  </div>
</template>
<script setup lang="ts">
import { getToken } from "@/utils/auth";
import { listByIds, delOss } from "@/api/system/oss";
@@ -160,50 +204,6 @@
  return strs != "" ? strs.substring(0, strs.length - 1) : "";
}
</script>
<template>
   <div class="upload-file">
      <el-upload
         multiple
         :action="uploadFileUrl"
         :before-upload="handleBeforeUpload"
         :file-list="fileList"
         :limit="limit"
         :on-error="handleUploadError"
         :on-exceed="handleExceed"
         :on-success="handleUploadSuccess"
         :show-file-list="false"
         :headers="headers"
         class="upload-file-uploader"
         ref="fileUploadRef"
      >
         <!-- 上传按钮 -->
         <el-button type="primary">选取文件</el-button>
      </el-upload>
      <!-- 上传提示 -->
      <div class="el-upload__tip" v-if="showTip">
         请上传
         <template v-if="fileSize">
            大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
         </template>
         <template v-if="fileType">
            格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
         </template>
         的文件
      </div>
      <!-- 文件列表 -->
      <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
         <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
            <el-link :href="`${file.url}`" :underline="false" target="_blank">
               <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
            </el-link>
            <div class="ele-upload-list__item-content-action">
               <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
            </div>
         </li>
      </transition-group>
   </div>
</template>
<style scoped lang="scss">
.upload-file-uploader {