OSS文件直传的秘密武器 - Java签名Vue ElementUI Axios携手出击

2023-08-12 16:30:03

轻松实现文件直传到阿里云OSS

简介

作为开发人员，我们经常需要将文件上传到云存储中，例如阿里云OSS。但传统的文件上传方式复杂且耗时，还需要我们实时掌握上传进度。现在，使用Java提供签名并结合Vue ElementUI Axios库，我们可以轻松、高效地实现文件直传，并实时显示上传进度。

一、Java提供签名

要上传文件，我们需要一个签名来授权前端上传文件到OSS。使用阿里云OSS SDK，我们可以轻松地生成这个签名：

import com.aliyun.oss.OSSClient;
import com.aliyun.oss.model.GeneratePresignedUrlRequest;

public class GenerateSignature {

    public static String generateSignature(String accessKeyId, String accessKeySecret, String bucketName, String objectName) {
        OSSClient ossClient = new OSSClient(accessKeyId, accessKeySecret);

        // 设置签名过期时间为10分钟
        Date expiration = new Date(new Date().getTime() + 1000 * 60 * 10);

        // 生成签名URL
        GeneratePresignedUrlRequest generatePresignedUrlRequest =
                new GeneratePresignedUrlRequest(bucketName, objectName, HttpMethod.PUT);
        generatePresignedUrlRequest.setExpiration(expiration);

        String url = ossClient.generatePresignedUrl(generatePresignedUrlRequest).toString();

        // 返回签名URL
        return url;
    }
}

二、Vue ElementUI Axios直传文件至OSS

有了签名，我们就可以使用Vue ElementUI Axios库直接上传文件了：

import axios from 'axios';
import ElementUI from 'element-ui';

export default {
    methods: {
        uploadFile(file) {
            // 获取签名
            const signature = this.generateSignature();

            // 上传文件至OSS
            axios.put(signature, file, {
                headers: {
                    'Content-Type': file.type,
                },
                onUploadProgress: (progressEvent) => {
                    // 实时显示上传进度
                    this.uploadProgress = Math.round(progressEvent.loaded / progressEvent.total * 100);
                },
            }).then((response) => {
                // 文件上传成功
                this.$message({
                    type: 'success',
                    message: '文件上传成功！',
                });
            }).catch((error) => {
                // 文件上传失败
                this.$message({
                    type: 'error',
                    message: '文件上传失败！',
                });
            });
        },
        generateSignature() {
            // 调用Java方法生成签名
            return generateSignature();
        },
    },
};

三、优势

这种方法具有以下优势：

简单易行： 只需几行代码即可完成签名生成和文件上传。
实时显示上传进度： 可直观地查看文件上传进度。
跨平台兼容： 适用于各种前端和后端技术栈。
安全可靠： 基于阿里云OSS的签名机制，确保文件上传的安全性。

常见问题解答

如何获取阿里云OSS的accessKeyId和accessKeySecret？
- 登录阿里云管理控制台，在“身份验证”下找到“AccessKey管理”。
如何设置签名过期时间？
- 在GenerateSignature类中的expiration变量中设置过期时间，单位为毫秒。
上传文件时需要设置哪些header？
- 至少需要设置Content-Type header，表明文件类型。
如何处理上传失败的情况？
- 在uploadFile方法的catch块中处理错误并显示友好的提示信息。
这种方法适用于哪些场景？
- 该方法适用于需要上传文件到阿里云OSS的各种场景，例如图片上传、视频上传、文档上传等。