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="width: 500px; margin-top: 20px">
      <el-form :model="uploadConfig" label-width="auto">
        <el-form-item label="文件類型">
          <el-select
            v-model="uploadConfig.type"
            placeholder="請選擇文件類型"
            multiple
            style="width: 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>