vue3+element plus文件直传阿里云oss

后端代码（java）

添加依赖

pom.xml

        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.15.0</version>
        </dependency>

OssController.java

package com.qc.controller;

import com.aliyun.oss.HttpMethod;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.GeneratePresignedUrlRequest;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.net.URL;
import java.util.Date;
import java.util.UUID;

/**
 * @author qc
 * @version 1.0
 * @date 2022/11/03 22:52
 */
@RestController
@RequestMapping("/oss")
public class OssController {

    @Value("${aliOss.endpoint}")
    private String endpoint;
    @Value("${aliOss.accessKeyId}")
    private String accessKeyId;
    @Value("${aliOss.accessKeySecret}")
    private String accessKeySecret;
    @Value("${aliOss.bucketName}")
    private String bucketName;


    /**
     * 获取阿里云oss文件上传链接
     *
     * @return java.lang.String 文件上传链接
     * @author qc
     * @date 2022/11/3 22:52
     */
    @GetMapping("/generatePresignedUrl")
    public String generatePresignedUrlRequest() {
        OSSClientBuilder ossClientBuilder = new OSSClientBuilder();
        OSS oss = ossClientBuilder.build(endpoint, accessKeyId, accessKeySecret);

//        文件名，可自行修改生成方式
        String key = UUID.randomUUID().toString();

//        授权过期时间
        Date expiration = new Date(System.currentTimeMillis() + 1000 * 60 * 24L);

        GeneratePresignedUrlRequest generatePresignedUrlRequest = new GeneratePresignedUrlRequest(bucketName, key, HttpMethod.PUT);
        generatePresignedUrlRequest.setContentType("application/octet-stream");
        generatePresignedUrlRequest.setExpiration(expiration);

        URL url = oss.generatePresignedUrl(generatePresignedUrlRequest);
        return url.toString();
    }


}

前端代码（vue）

request.js

import axios from 'axios'


export default axios

ossApi.js

import request from "@/api/request.js";

export function generatePresignedUrlApi(params) {
    return request({
        url: '/oss/generatePresignedUrl',
        method: 'get',
        params:params,
    })
}

export function ossUploadApi(url,file,progressEvent) {
    return request({
        url: url,
        method: 'put',
        headers: {
            "Content-Type": "application/octet-stream"
        },
        data:file,
        onUploadProgress:progressEvent,
    })
}

Upload.vue

<script setup>

import {generatePresignedUrlApi, ossUploadApi} from "@/api/ossApi.js";
import {Plus} from "@element-plus/icons";
import {ref} from "vue";

const fileList = ref([])

/**
 *
 * @param option
 * @return {XMLHttpRequest}
 */
const handleHttpReq = (option) => {

  generatePresignedUrlApi().then(res => {

    let isSuccess = false

    ossUploadApi(res.data.data, option.file, e => {

      if (!isSuccess) {
        option.onProgress({percent: e.progress * 100})
      }

    }).then(r => {
      isSuccess = true
      option.onProgress({percent: 100})
      option.onSuccess(res.data.data.split("?")[0])
    })

  })

}


const handleSuccess = (response, uploadFile, uploadFiles) => {
  uploadFile.url = response
}

</script>

<template>
  <el-upload
      v-model:file-list="fileList"
      list-type="picture-card"
      :http-request="handleHttpReq"
      :on-success="handleSuccess"
      multiple
  >
    <el-icon>
      <Plus/>
    </el-icon>
  </el-upload>
</template>

<style scoped>

</style>