基于elementUI和spring boot的上传下载demo

最新推荐文章于 2024-04-08 18:17:25 发布

DUT_Walnut

最新推荐文章于 2024-04-08 18:17:25 发布

阅读量446

点赞数

分类专栏： JavaWeb Vue

本文链接：https://blog.csdn.net/DUT_Walnut/article/details/105447862

版权

本文档详细介绍了如何使用ElementUI前端框架和Spring Boot后端框架实现文件上传和下载功能。前端部分包括单一文件上传的实现，限制文件大小不超过20MB；后端则讲解了将文件存储到OBS桶内的过程。此外，还提供了前端展示效果的截图，以及文件下载功能的前端和后端实现细节。

摘要由CSDN通过智能技术生成

上传功能

单一文件的上传，且文件小于20MB

前端

<template>块内

 <!-- 作品上传 -->
      <el-menu-item>
        <el-button type="text" @click="uploadAreaVisible = true">上传</el-button>
        <el-dialog title="作品上传" :visible.sync="uploadAreaVisible">
          <el-upload
          drag action=""
          :before-upload="beforeUpload"
          ref="newupload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :limit="1"
          :auto-upload="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <el-input type="textarea" class="description" :rows="2" placeholder="请输入作品描述(可选)" v-model="profile" />
          <div slot="footer" class="dialog-footer">
            <el-button @click="uploadAreaVisible = false">取消上传</el-button>
            <el-button type="primary" @click="newSubmitForm" >开始上传</el-button>
          </div>
        </el-dialog>
      </el-menu-item>