Vue3+ElementPlus文件上传详细教程

首先添加el-upload标签到页面中

<el-upload
    class="upload-demo"
    drag
    action="http://localhost:8082/movie/upload"
    :before-upload="beforeAvatarUpload"
    :on-success="uploadsuccess"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      拖拽上传或 <em>点击上传</em>
    </div>

使用action属性为自动上传，值设置为你的后端接口地址，before-upload属性绑定的方法是上传前自动调用的方法，可以对具体上传的文件格式进行限制。

function beforeAvatarUpload(file) {
      // isJPG图片格式是否符合我们的规定
      const isJPG = file.type === 'image/jpeg';
      // isLt2M 文件大小是否符合我们的规定
      const isLt2M = file.size / 1024 / 1024 < 2; 
      if (!isJPG) {
        ElMessage.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 2MB!');
      }
     
      return isJPG && isLt2M;
    }

:on-success属性绑定的函数为文件上传成功时自动调用的函数，通常用来获取后端接口返回的值。

 function uploadsuccess(file){
    console.log(file)
    
  }

下边是后端代码，使用action方式自动上传文件，会自动向后端传递一个文件对象，在后端用MultipartFile接收它，然后进行文件的保存就可以了。

@RequestMapping("/upload")
    public  String upload(@RequestBody MultipartFile file){
     
        // 处理文件，获取文件名
        String fileName = file.getOriginalFilename();
        String characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        StringBuilder sb = new StringBuilder();
        Random random = new Random();

        for (int i = 0; i < 16; i++) {
            char c = characters.charAt(random.nextInt(characters.length()));
            sb.append(c);
        }
        //生成随机字符串
        String newFileName = sb.toString() + fileName;
        try {
            byte[] bytes = file.getBytes();
            File serverFile = new File("项目资源目录的地址" + newFileName);
            System.out.println(serverFile.getAbsolutePath());
            FileUpload.writeFile(serverFile, bytes);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return newFileName;
    }