Vue+Element el-upload文件上传

多文件上传 ,类型、大小限制

<h2>上传文件</h2>
    <el-card>
        <el-upload
                   class="upload-demo"
                   ref="upload"
                   action="#"
                   :file-list="fileList"
                   accept=".pdf, .doc, .docx, .xls, .xlsx, .zip, .jpg, .png, .rar"
                   :http-request="reportFileHttpRequest"
                   :on-preview="handlePreview"
                   :on-remove="handleRemove"
                   :before-upload="beforeAvatarUpload"
                   :auto-upload="false"
                   drag
                   multiple
                   style="text-align: center">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传word,excel,pdf,jpg,png,zip,rar文件</div>
        </el-upload>
        <div align="center">
            <span slot="footer" class="dialog-footer" >
                <el-button style="margin-left: 10px;" size="small" @click="fileList = []">取 消</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            </span>
        </div>
    </el-card>

ref="upload" 注册引用信息
action="#"
:file-list="fileList" 文件列表
accept=".pdf, .doc, .docx, .xls, .xlsx, .zip, .jpg, .png, .rar" 限制文件接收类型
:http-request="reportFileHttpRequest" 自定义上传
:on-preview="handlePreview" 点击文件列表中已上传的文件时的钩子
:on-remove="handleRemove" 文件列表移除文件时的钩子
:before-upload="beforeAvatarUpload" 文件上传之前的钩子
:auto-upload="false" 关闭自动上传
drag 拖拽上传
multiple 批量上传

// 上传文件 此时会触发组件的http-request
submitUpload() {
    this.$refs.upload.submit();
},
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {
    console.log(file, fileList);
},
// 点击文件列表中已上传的文件时的钩子
handlePreview(file) {
    console.log(file);
},
// 文件上传之前的钩子
beforeAvatarUpload(file) {
    const isLt2M = file.size / 1024 / 1024 < 32;
    if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 32MB!');
    }
    return isLt2M;
},
// 自定义上传
reportFileHttpRequest(param) {
    if (this.$refs.upload) {
        this.$refs.upload.clearFiles() // 清除上传的文件
    }
    const _this = this
    // 开始上传文件 新建一个formData
    const formData = new FormData();//FormData对象,添加参数只能通过append('key', value)的形式添加
    formData.append("file", param.file);//添加文件对象
    const url = 'http://***********/upload';
    axios.post(url, formData)
        .then(res => {
        axios.post(url, data)
            .then(function (resp) {
            if (resp.data.code == 200) {
                _this.$message({
                    message: '上传成功',
                    type: 'success'
                });
            } else {
                _this.$message(resp.data.data)
            }
        })
    })
}