Element-ui upload上传组件的具体使用

Element-ui upload上传组件的具体使用

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。本次主要讲解其中upload上传组件的具体使用

在Element的官网中也有一些例子来体验其功能,网址为:https://element.eleme.cn/#/zh-CN/component/upload

upload标签为: el-upload 其中所需要功能均可以在其中添加实现

upload组件的参数

Element-ui upload上传组件的具体使用


Element-ui upload上传组件的具体使用


Element-ui upload上传组件的具体使用

upload组件的方法

Element-ui upload上传组件的具体使用

常用参数与方法说明

upload中常用的参数
action    			  		        上传的地址(常量)  目前可以测试上传的网址为:https://jsonplaceholder.typicode.com/posts/
:action               					上传的地址(变量)  正常开发是调用后台API的地址比如:`${location.origin}/demo/apis/test/api/upload`   location.origin是域名(协议,主机号,端口)
:multiple             					true 支持多选文件       false 不支持多选文件 默认为不支持
:show-file-list       					true 显示已上传文件列表  false 不显示        默认为显示
accept                					接受上传文件的类型,比如".zip"  可以选择ZIP压缩文件
:on-success="handleSuccess"   			        文件上传成功时调用方法
:on-error="handleError"					文件上传失败时调用方法
:before-upload="handleBeforeUpload"		        上传文件之前时调用方法,参数为上传的文件,若返回 false 或者返回Promise 且被 reject,则停止上传。 注意此时不能调用clearFiles方法
:disabled						是否禁用,true为禁用,false为可用  默认为可用
:limit							最大允许上传个数,如果超出则不会上传
:on-change="handleChange"                               文件状态改变时调用方法,添加文件、上传成功和上传失败时都会被调用
:auto-upload						true 选取文件后立即上传 false不自动上传需要手动上传 需要调用submit方法进行上传

upload中常用方法
调用:
this.$refs.xxx.clearFiles                               清空已上传的文件列表(该方法不支持在 before-upload 中调用)
this.$refs.xxx.submit                                   手动上传文件列表

具体实例

这里准备了两个例子,一个是自动上传,另一个是手动上传。在项目中如果没有特殊需求的话用自动上传更方便一些。style标签设置的只是一个平时写比较习惯用的参数,可以忽略

自动上传

<template>
  <div class="app-container">
    <div class="the-container">
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :multiple="true"
        :show-file-list="true"
        :file-list="fileList"
        accept=".zip,.txt"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="handleBeforeUpload"
        :limit="1"
        :on-exceed="handleExceed"
        :on-change="handleChange"
      >
        <el-button type="primary">上传</el-button>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  name: ‘Index‘,
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 上传成功
    handleSuccess() {
      this.$refs.uploadRef.clearFiles()
      this.$message({
        message: ‘上传成功‘,
        type: ‘success‘
      })
    },
    // 上传失败
    handleError() {
      this.$message({
        message: ‘上传失败‘,
        type: ‘error‘
      })
    },
    // 上传文件之前
    handleBeforeUpload(file) {
      const fileType = file.name.substring(file.name.lastIndexOf(‘.‘) + 1)
      const fileTypeList = [‘zip‘, ‘txt‘]
      if (!fileTypeList.includes(fileType)) {
        this.$message({
          message: ‘上传文件只能是zip,txt格式‘,
          type: ‘error‘
        })
        this.fileList = []
        return false
      }
      return true
    },
    // 上传文件数超过限制
    handleExceed() {
      this.$message({
        message: ‘最大上传文件个数为1‘,
        type: ‘error‘
      })
    },
    // 文件状态改变时
    handleChange(file) {
      console.log(file.status)
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    height: 100%;
    background-color: #f1f1f1;
  }
  .the-container{
    padding: 20px;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
  }
</style>

手动上传

手动上传主要是针对有明确要求需要一些权限才允许上传的情况。

<template>
  <div class="app-container">
    <div class="the-container">
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        :action="actionUrl"
        :multiple="true"
        :show-file-list="true"
        :file-list="fileList"
        accept=".zip,.txt"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="handleBeforeUpload"
        :limit="1"
        :on-exceed="handleExceed"
        :on-change="handleChange"
        :auto-upload="false"
      >
        <el-button type="primary">上传</el-button>
      </el-upload>
      <el-dialog
        title="请输入密码"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="密码" prop="pass">
            <el-input v-model="ruleForm.pass" type="password" show-password />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitPass">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: ‘Index‘,
  data() {
    return {
      fileList: [],
      // 实际开发中actionUrl为后台API 比如`${location.origin}/demo/apis/test/api/upload`
      actionUrl: ‘https://jsonplaceholder.typicode.com/posts/‘,
      // 此参数为是否显示对话框
      dialogVisible: false,
      ruleForm: {
        pass: ‘‘
      }
    }
  },
  methods: {
    // 上传成功
    handleSuccess() {
      this.$refs.uploadRef.clearFiles()
      this.$message({
        message: ‘上传成功‘,
        type: ‘success‘
      })
    },
    // 上传失败
    handleError() {
      this.$message({
        message: ‘上传失败‘,
        type: ‘error‘
      })
    },
    // 上传文件之前
    handleBeforeUpload(file) {
      const fileType = file.name.substring(file.name.lastIndexOf(‘.‘) + 1)
      const fileTypeList = [‘zip‘, ‘txt‘]
      if (!fileTypeList.includes(fileType)) {
        this.$message({
          message: ‘上传文件只能是zip,txt格式‘,
          type: ‘error‘
        })
        this.fileList = []
        return false
      }
      return true
    },
    // 上传文件数超过限制
    handleExceed() {
      this.$message({
        message: ‘最大上传文件个数为1‘,
        type: ‘error‘
      })
    },
    // 文件状态改变时
    handleChange(file) {
      console.log(file.status)
      if (file.status === ‘ready‘) {
        this.dialogVisible = true
      }
    },
    // 关掉对话框时
    handleClose() {
      this.$refs.uploadRef.clearFiles()
      this.dialogVisible = false
    },
    // 提交密码
    submitPass() {
      console.log(this.ruleForm.pass)
      if (this.ruleForm.pass === ‘111111‘) {
        this.$refs.uploadRef.submit()
        this.dialogVisible = false
      } else {
        this.$message({
          message: ‘请输入正确的密码‘,
          type: ‘error‘
        })
        this.dialogVisible = false
        this.$refs.uploadRef.clearFiles()
      }
    }
  }
}
</script>

<style scoped>
  .app-container {
    height: 100%;
    background-color: #f1f1f1;
  }
  .the-container{
    padding: 20px;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
  }
</style>

如果不理解el-dialog对话框组件可以参考官网的组件文档:https://element.eleme.cn/#/zh-CN/component/dialog

Element-ui upload上传组件的具体使用

上一篇:Flannel的两种模式解析(VXLAN、host-gw)


下一篇:微信公众平台开发教程目录