SpringBoot3 + Element-Plus + Vue3 + TS 实现上传、拖拽上传到阿里云OSS视频、图片、文件以及对图片、视频的预览和删除OSS端图片（最新）

以下是一个简化的示例，展示如何在Spring Boot 3、Vue 3和TypeScript中结合Element-Plus实现文件的上传以及拖拽上传功能，并将文件上传到阿里云OSS。

后端（Spring Boot 3）:

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
 
@RestController
@RequestMapping("/api/oss")
public class OssController {
 
    @PostMapping("/upload")
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        // 实现文件上传到OSS的逻辑
        // 返回文件在OSS上的地址
        return "https://your-oss-bucket.oss-cn-hangzhou.aliyuncs.com/uploaded-file";
    }
}

前端（Vue 3 + TypeScript）:

<template>
  <el-upload
    action="http://localhost:8080/api/oss/upload"
    :on-success="handleSuccess"
    :on-error="handleError"
    drag>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  setup() {
    const handleSuccess = (response: any, file: any, fileList: any) => {
      console.log('File uploaded successfully:', response);
    };
 
    const handleError = (err: any, file: any, fileList: any) => {
      console.error('Error uploading file:', err);
    };
 
    return {
      handleSuccess,
      handleError,
    };
  },
});
</script>

确保你已经在package.json中添加了所需的依赖，并在.env文件中配置了阿里云OSS的相关参数。

以上代码仅提供了上传文件到OSS的基本框架，实际使用时需要完善文件上传到OSS的逻辑，比如添加必要的认证信息（如签名），处理进度条，处理断点续传等功能。