当前位置: 首页 > article >正文

使用 ElementUI 和 Spring 实现稳定可靠的文件上传和下载功能

前端(ElementUI)

1. 文件上传

  • 使用 el-upload 组件
  • 配置上传接口
  • 处理上传成功和失败
<template>
  <div>
    <el-upload
      class="upload-demo"
      action="http://your-server-url/upload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :show-file-list="true"
      :auto-upload="true"
      :headers="headers">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      headers: {
     
        Authorization: 'Bearer ' + localStorage.getItem('token') // 如果需要认证
      }
    };
  },
  methods: {
     
    handleSuccess(response, file, fileList) {
     
      this.$message.success('文件上传成功');
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
     
      this.$message.error('文件上传失败');
      console.error

http://www.kler.cn/a/533991.html

相关文章:

  • 导入了fastjson2的依赖,但却无法使用相关API的解决方案
  • SpringSecurity密码编码器:使用BCrypt算法加密、自定义密码编码器
  • 【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter3-语言基础
  • 【Leetcode】4. 寻找两个正序数组的中位数
  • 关于deepseek的一些普遍误读
  • 为AI聊天工具添加一个知识系统 之87 详细设计之28 Derivation 统一建模元模型 之1
  • 【大数据技术】编写Python代码实现词频统计(python+hadoop+mapreduce+yarn)
  • WPS的word的水印去除
  • docker 实战练习1
  • 数码分享官 | 华硕灵耀14 双屏 2025,科技与美学的完美碰撞
  • 2025年02月05日Github流行趋势
  • 冒泡排序的原理及优化
  • 【3分钟极速部署】在本地快速部署deepseek
  • Linux中系统相关指令(一)
  • 国防科大:双目标优化防止LLM灾难性遗忘
  • uniapp引入cloudflare人机验证
  • Docker深度解析:Docker 安装
  • 【蓝桥杯嵌入式】LED
  • C#中堆和栈的区别
  • 5. scala高阶之traits
  • C# 程序计算圆的面积(Program to find area of a circle)
  • Git、Github和Gitee完整讲解:丛基础到进阶功能
  • 鸿蒙Harmony-Refresh 容器组件
  • 【kafka的零拷贝原理】
  • [Java]函数式编程
  • 基于微信小程序的居住证申报系统设计与实现(LW+源码+讲解)