使用element-ui的el-upload实现自定义上传及滚动条功能。

最新推荐文章于 2024-10-09 18:31:58 发布

一键写代码

最新推荐文章于 2024-10-09 18:31:58 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_42991509/article/details/125777428

版权

<template>
  <div class="container page-card-box">
    <div class="form-wrapper-box">

      <el-form ref="form" :model="form" label-width="120px">
        
        <el-form-item label="文件：" prop="imagesPic">
          <el-upload
            class="upload-demo"
            :action="`${baseUrl}/uploads/`"
            :headers="upHeaders"
            :http-request="handleUpload"
            :before-upload="beforeUpload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传zip格式文件，且大小不超过50MB</div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button style="width: 60%; margin-top: 60px" type="primary" @click="onSubmit">提 交</el-button>