vue element upload 文件上传组件使用

演示

代码

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card header="选取文件自动上传" class="upload-card-box">
          <el-upload
            v-loading="uploadLoading"
            ref="upload"
            multiple
            action="#"
            :limit="uploadConfig.limit"
            :file-list="fileList"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :http-request="autoUpload"
            :auto-upload="true"
          >
            <el-button size="small" type="primary">选取文件自动上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传 {{ fileType }} 文件，且不超过{{ uploadConfig.size }}M
            </div>
          </el-upload>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card header="选取文件手动上传" class="upload-card-box">
          <el-upload
            v-loading="uploadLoading"
            ref="upload"
            action="#"
            :limit="uploadConfig.limit"
            :file-list="fileList"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :http-request="submitUpload"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">
              选取文件
            </el-button>
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="uplaodConfirm"
            >
              手动上传
            </el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传 {{ fileType }} 文件，且不超过{{ uploadConfig.size }}M
            </div>
          </el-upload>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card header="拖拽自动上传" class="upload-card-box">
          <el-upload
            v-loading="uploadLoading"
            ref="upload"
            drag
            action="#"
            multiple
            :limit="uploadConfig.limit"
            :file-list="fileList"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :http-request="autoUpload"
            :auto-upload="true"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传 {{ fileType }} 文件，且不超过{{ uploadConfig.size }}M
            </div>
          </el-upload>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card header="拖拽手动上传" class="upload-card-box">
          <el-upload
            v-loading="uploadLoading"
            ref="upload"
            drag
            action="#"
            multiple
            :limit="uploadConfig.limit"
            :file-list="fileList"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :http-request="submitUpload"
            :auto-upload="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传 {{ fileType }} 文件，且不超过{{ uploadConfig.size }}M
            </div>
          </el-upload>
          <el-button
            style="margin-top: 10px"
            size="small"
            type="success"
            @click="uplaodConfirm"
          >
            手动上传
          </el-button>
        </el-card>
      </el-col>
    </el-row>

    <el-card header="上传配置" style=" 500px; margin-top: 20px">
      <el-form :model="uploadConfig" label-width="auto">
        <el-form-item label="文件类型">
          <el-select
            v-model="uploadConfig.type"
            placeholder="请选择文件类型"
            multiple
            style=" 100%"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in typeOption"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件大小（M）">
          <el-input
            v-model.number="uploadConfig.size"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传数量">
          <el-input
            v-model.number="uploadConfig.limit"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      fileList: [],
      typeOption: ['pdf', 'png', 'jpg', 'zip', 'xlsx', 'js', 'java', 'txt'],
      uploadConfig: {
        type: ['png', 'pdf', 'xlsx'],
        size: 2,
        limit: 2,
      },
      uploadLoading: false,
    }
  },
  computed: {
    fileType() {
      return this.uploadConfig.type.join('/')
    },
  },
  methods: {
    // 超出限制警告
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.uploadConfig.limit} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    // 移除文件
    handleRemove(file) {
      this.fileList = this.fileList.filter((item) => {
        return item.name !== file.name
      })
    },
    // 文件校验正则
    isType(file) {
      let reg = eval('/\\.(' + this.uploadConfig.type.join('|') + ')$/')
      return reg.test(file.name)
    },
    // 手动上传文件前校验
    handleChange(file, fileList) {
      if (!this.isType(file)) {
        this.$message({
          type: 'warning',
          message: `上传文件只能为 ${this.fileType} 文件`,
        })
        fileList.pop()
        this.fileList = fileList
        return false
      }

      if (file.size / 1024 / 1024 > this.uploadConfig.size) {
        this.$message({
          type: 'warning',
          message: `上传文件最大只能${this.uploadConfig.size}M`,
        })
        fileList.pop()
        this.fileList = fileList
        return false
      }

      let existFile = fileList
        .slice(0, fileList.length - 1)
        .find((f) => f.name === file.name)

      if (existFile) {
        this.$message.warning('当前文件已经存在!')
        fileList.pop()
        this.fileList = fileList
      }

      this.fileList = fileList
    },
    // 自动上传文件前校验
    beforeUpload(file, fileList) {
      if (!this.isType(file)) {
        this.$message({
          type: 'warning',
          message: `上传文件只能为 ${this.fileType} 文件`,
        })
        return false
      }

      if (file.size / 1024 / 1024 > this.uploadConfig.size) {
        this.$message({
          type: 'warning',
          message: `上传文件最大只能${this.uploadConfig.size}M`,
        })
        return false
      }
      console.log(this.fileList)
      if (this.fileList.some((item) => item.name === file.name)) {
        this.$message.warning('当前文件已经存在!')
        return false
      }

      this.fileList.push(file)
    },
    // 自动上传
    autoUpload(file) {
      // 上传主体 file.file
      console.log(file)
      this.uploadLoading = true
      setTimeout(() => {
        this.uploadLoading = false
        this.$message({
          type: 'success',
          message: `上传成功`,
        })
      }, 1000)
    },
    // 确定上传
    uplaodConfirm() {
      this.$refs.upload.submit() //调用上传方法
    },
    // 手动上传
    submitUpload() {
      // 上传主体每一项的 item.raw
      console.log(this.fileList)
      if (this.fileList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请先选择文件!',
        })
        return
      }
      this.uploadLoading = true
      setTimeout(() => {
        this.uploadLoading = false
        this.$message({
          type: 'success',
          message: `上传成功`,
        })
        this.fileList = []
      }, 1000)
    },
  },
}
</script>

<style scoped lang="scss">
.upload-card-box {
  height: 400px;
}
</style>