重新上传的方法

最新推荐文章于 2024-07-30 15:32:11 发布

csstmg

最新推荐文章于 2024-07-30 15:32:11 发布

阅读量1k

点赞数 2

分类专栏：前端 element 文章标签： ffmpeg

本文链接：https://blog.csdn.net/csstmg/article/details/128095418

版权

前端同时被 2 个专栏收录

171 篇文章 1 订阅

订阅专栏

element

104 篇文章 0 订阅

订阅专栏

这是一个关于前端上传组件的实现细节，包括文件类型检查、大小限制、重新上传和删除功能。组件使用了Element UI的`el-upload`组件，支持文件列表显示，并在上传前进行格式和大小验证，超过限制时会显示错误提示。此外，还提供了重新上传和删除文件的操作方法。

摘要由CSDN通过智能技术生成

  <el-upload
      ref="uploadDemo"
      v-else-if="type == 'file'"
      class="upload-demo logo-uploader"
      :action="action"
      :headers="headers"
      :file-list="fileList"
      :show-file-list="showFileList"
      :on-exceed="exceed"
      :limit="limit"
      :accept="allowType && allowType.toString()"
      :on-success="success"
      :on-progress="progress"
      :multiple="multiple"
      :before-upload="beforeUpload"
    >
      <div class="logo-uploader-icon">
        <div class="upload-box">
          <svg-icon icon-class="icon-upload" size="25">
          </svg-icon>
        </div>
        <div class="">{{ btnName }}</div>
      </div>

    </el-upload>
    <template v-if="type == 'file'">
      <div  class="pdf-item" @click.stop.prevent v-for="(item, index) in fileList" :key="index" style="display: flex;">
          <div class="info">
            <slot name="icon"></slot>
            <span>{{ item.name }}</span>
          </div>
          <span>
            <a href="javascript:;"  @click.stop="reloadUpload">重新上传</a>
            <a href="javascript:;" class="ml-10" @click.stop="delPdf(index)">删除</a>
          </span>
        </div>
    </template>

data(){
return {
  showFileList:false,
}
}

  // 重新上传方法
  reloadUpload() {
      document.querySelector('.el-upload__input').click()
    },
 // 上传之前
 beforeUpload(file) {
      let typeName = this.typeName
      if (this.type == 'file') {
        typeName = '文件'
      }
      if (this.allowType) {
        var index = this.allowType.indexOf(
          file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
        )
        if (index < 0) {
          this.$message({
            message: `${typeName}格式不正确`,
            type: 'warning'
          })
          return false
        }
      }
      if (this.allowSize) {
        // debugger
        const b = file.size
        let isLtSize = b > this.allowSize * 1024
        const sizeStr =
          this.allowSize >= 1024
            ? `${Math.round((this.allowSize / 1024) * 100) / 100}MB`
            : `${this.allowSize}KB`
        const videoType = [
          '.MP4',
          '.mp4',
          '.mmvb',
          '.fliv',
          '.avi',
          '.3gp',
          '.flv'
        ] // '.MP4', '.mp4', '.mmvb', '.fliv', '.avi', '.3gp', '.flv' 视频默认 50M
        let isVideo = false
        if (
          this.defaultSize &&
          videoType.indexOf(
            file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
          ) > 0
        ) {
          isLtSize = file.size > 1024 * 1024 * 50
          isVideo = true
        }
        if (isLtSize) {
          if (this.hasVideo && isVideo) {
            this.$message.error(`${typeName}不能超过50M哦`)
          } else {
            this.$message.error(`${typeName}不能超过${sizeStr}哦`)
          }
          return false
        }
      }
    },
    handleRemove(file, fileList) {
      this.$emit('handleRemove', file, fileList)
    }