当前位置：首页 > article >正文

在Uniapp中使用阿里云OSS插件实现文件上传

article 2025/2/12 16:42:28

在开发小程序时，文件上传是一个常见的需求。阿里云OSS（Object Storage Service）是一个强大的云存储服务，可以帮助我们高效地存储和管理文件。本文将介绍如何在Uniapp小程序中使用阿里云OSS插件实现文件上传功能。

1. 准备工作

首先，我们需要在Uniapp项目中引入阿里云OSS插件。插件的地址为：https://ext.dcloud.net.cn/plugin?id=5416。在HBuilderX中打开项目，找到manifest.json文件，在App原生插件配置中勾选该插件。

2. 初始化OSS插件

在使用OSS插件之前，我们需要对其进行初始化。初始化时需要配置STS服务器地址、OSS的Endpoint以及本地文档路径。以下是一个初始化的示例代码：

var oss = uni.requireNativePlugin("MZ-AliyunOss");

init() {
    var self = this;
    oss.init({
        stsServer: 'https://xxx.xxx.com/api/createVideo/ossToken', // STS服务器地址
        endPoint: "https://oss-cn-shanghai.aliyuncs.com", // OSS的Endpoint
        docPath: plus.io.convertLocalFileSystemURL("_doc"), // 本地文档路径
    }, ret => {
        console.log("---------------------------ret", ret) 
    });
},

在初始化时，stsServer是获取临时凭证的服务器地址，endPoint是OSS服务的访问地址，docPath是本地文件的存储路径。

3. 上传文件

初始化完成后，我们可以使用OSS插件上传文件。以下是一个上传视频文件的示例代码：

recordVideo() {
    let that = this;
    uni.chooseVideo({
        sourceType: ["camera", "album"], // 从相机拍摄或相册选择
        compressed: false, // 不压缩视频
        maxDuration: this.selData.subVideoLen, // 限制拍摄时长
        camera: "back", // 使用后置摄像头
        success: (res) => {
            console.log("拍摄成功", res);
            uni.showLoading({
                title: "上传中...",
                mask: true, // 遮罩层，防止用户操作
            });

            let pathArr = res.tempFilePath.split("/");
            let fileName = pathArr[pathArr.length - 1];
            let fileExt = fileName.split(".")[1];
            let videoName = fileName.split(".")[0] + "." + fileExt;
            let videopath = plus.io.convertLocalFileSystemURL(res.tempFilePath);

            oss.setUploadObjectListener({}, ret => {
                console.log(ret); 
                
                if(ret.eventType=='onSuccess'){
                    let awemeUrl = "https://xxx.oss-cn-shanghai.aliyuncs.com/dzjz/" + videoName;
                    console.log("上传成功，文件地址：", awemeUrl);
                } 
            });

            oss.uploadObject({
                bucket: 'xxx', // OSS的Bucket名称
                key: 'dzjz/'+videoName, // 文件在OSS中的存储路径
                path: videopath // 本地文件路径
            }, ret => { 
                console.log("上传结果：", ret);
            }); 
        },
        fail: (err) => {
            console.error("拍摄失败", err.errMsg);
        },
    });
},