vue使用阿里oss上传

Posted on   矜持i  阅读(209)  评论(0编辑  收藏  举报

1、首先用包管理工具 npm install ali-oss --S 下载oss依赖包

2、在util文件里创建util.js文件,在该文件写入

复制代码
export default {

getClient: function() {
// let OSS = require('ali-oss')
let OSS = require('ali-oss/dist/aliyun-oss-sdk.min.js')
return new OSS({
region: 'oss-cn-shanghai', //你的oss地址 ,具体位置见下图
accessKeyId: 'xxx', //你的ak
accessKeySecret: 'xxx', //你的secret
bucket: 'xxx' //你的oss名字
})
},
}
复制代码

3、在main.js文件里写入:

import utils from './static/utils/index.js'
Vue.prototype.$utils= utils

4、在页面使用

复制代码
            uploadMa() {
                (function() {
                    return new Promise((resolve, reject) => {
                        uni.chooseImage({
                            count: 1,
                            success(res) {
                                resolve(res.tempFiles)
                            },
                            fail(err) {
                                console.log(err)
                                reject(err)
                            }
                        })
                    })
                })().then(filesArr => {
                    const thisSelf = this;
                    const client = thisSelf.$utils.getClient();
                    let arr = [];
                    uni.showLoading({
                        title: '上传中...'
                    });
                    for (let i = 0; i < filesArr.length; i++) {
                        var datetoday = thisSelf.$utils.getTodayDate();
                        var randomStr = "/" + new Date().getTime() + thisSelf.$utils.randomString(4); //  4位随机字符串
                        var extensionName = filesArr[i].name.substr(filesArr[i].name.lastIndexOf(".")); // 文件扩展名
                        var fileName = "image/" + datetoday + randomStr + extensionName; // 文件名字(相对于根目录的路径 + 文件名)

                        client.multipartUpload(fileName, filesArr[i]).then(function(result) {
                            arr.push(result.res.requestUrls[0].split('?')[0])
                            if (arr.length === filesArr.length) {
                                uni.hideLoading();
                                thisSelf.platformPicture = arr[0]
                                console.log(arr[0])
                            }
                        })
                    }
                })
            },
复制代码

5、至此已完成

 


相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通

随笔 - 10, 文章 - 0, 评论 - 0, 阅读 - 7885

Copyright © 2025 矜持i
Powered by .NET 9.0 on Kubernetes

点击右上角即可分享
微信分享提示