兰宝车间质量管理系统-前端
疯狂的狮子Li
2023-04-03 1595cb282aab5399862fac6406b5de550863e3b6
src/components/ImageUpload/index.vue
@@ -1,3 +1,42 @@
<template>
  <div class="component-upload-image">
    <el-upload
      multiple
      :action="uploadImgUrl"
      list-type="picture-card"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :limit="limit"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      ref="imageUpload"
      :before-remove="handleDelete"
      :show-file-list="true"
      :headers="headers"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :class="{ hide: fileList.length >= limit }"
    >
      <el-icon class="avatar-uploader-icon"><plus /></el-icon>
    </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>
    <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { getToken } from "@/utils/auth";
import { listByIds, delOss } from "@/api/system/oss";
@@ -175,45 +214,6 @@
  return strs != "" ? strs.substring(0, strs.length - 1) : "";
}
</script>
<template>
   <div class="component-upload-image">
      <el-upload
         multiple
         :action="uploadImgUrl"
         list-type="picture-card"
         :on-success="handleUploadSuccess"
         :before-upload="handleBeforeUpload"
         :limit="limit"
         :on-error="handleUploadError"
         :on-exceed="handleExceed"
         ref="imageUpload"
         :before-remove="handleDelete"
         :show-file-list="true"
         :headers="headers"
         :file-list="fileList"
         :on-preview="handlePictureCardPreview"
         :class="{ hide: fileList.length >= limit }"
      >
         <el-icon class="avatar-uploader-icon"><plus /></el-icon>
      </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>
      <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
         <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
      </el-dialog>
   </div>
</template>
<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分