el-upload的使用

<template>
  <div class="download">
    <!--
    action：必选参数，上传的地址
    accept：接受上传的文件类型
    drag：是否启用拖拽上传
    disabled：是否禁用
    file-list：上传的文件列表
    multiple：是否支持多选文件
    list-type：文件列表的类型
    limit：最大允许上传个数
    show-file-list：是否显示已上传文件列表
    -->
    <el-upload
      class="upload-demo"
      drag
      multiple
      :limit="1"
      :accept="'.jpg,.png'"
      :file-list="fileList"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-exceed="handleExceed"
      :on-preview="handlePreview"
      :before-upload="beforeAvatarUpload"
      :on-change="handleChange"
      :on-success="handleAvatarSuccess"
      :on-error="handleAvatarError"
      :on-remove="handleRemove">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
    export default {
        name: 'download',
        data() {
            return {
                fileList: []
            }
        },
        methods: {
            handleExceed(files, fileList) {
                this.$message.warning('文件超出个数限制时的钩子');
            },
            handlePreview(file) {
                this.$message.warning('点击文件列表中已上传的文件时的钩子');
            },
            beforeAvatarUpload(file) {
                this.$message.success('上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传');
            },
            handleChange(file, fileList) {
                this.$message.success('文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用');
            },
            handleAvatarSuccess(res, file, fileList) {
                this.$message.success('文件上传成功时的钩子:' + res);
            },
            handleAvatarError(err, file, fileList) {
                this.$message.success('文件上传失败时的钩子:' + err);
            },
            handleRemove(file, fileList) {
                this.$message.success('文件列表移除文件时的钩子');
            },
        }
    }
</script>

 

来源：CSDN

作者：熙冰

链接：https://blog.csdn.net/melodystars/article/details/103962540