Bootstrap

使用 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
;