云开发---uniapp云开发(二)---云存储基础

云开发系列 视频 https://www.bilibili.com/video/BV1eK4y1p7Qe 我们之前已经讲了 云函数的使用 云开发---uniapp云开发(一)---服务空间创建以及部署一个云函数 云开发---uniapp云开发云函数练习---整合百度ai图像识别SDK 这次我们来一起学习 云存储的使用 文档地址 https://uniapp.dcloud.io/uniCloud/storage

视频

video(video-kQL3DoBv-1614160881827)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=886530706&page=2)(image-https://ss.csdn.net/p?http://i0.hdslb.com/bfs/archive/52b78eb6e48dc657149f3c0415bbf83a73d64f0e.jpg)(title-云开发系列)

云存储基础

服务空间的云存储

服务空间 https://unicloud.dcloud.net.cn/home

无

上传文件

https://uniapp.dcloud.io/uniCloud/storage?id=uploadfile

选择文件/图片/其它

如果你要上传文件/图片 首先要选择文件/图片 获取临时地址

选择文件

https://uniapp.dcloud.io/api/media/file?id=choosefile

无

选择图片

https://uniapp.dcloud.io/api/media/image?id=chooseimage

无

选择视频

https://uniapp.dcloud.io/api/media/video?id=choosevideo

无

选择图片或视频

https://uniapp.dcloud.io/api/media/video?id=choosemedia

无

使用

这里举例为上传图片

选择图片

我们先来看看选择照片后的打印结果

由于count我们设置成了1 所以每次最多只能选一个

代码语言：txt复制

uni.chooseImage({
    count:1,
    sizeType: ['compressed'], //指定压缩图
    success:function(res){
        console.log(res)
    }
})

无

代码语言：txt复制

uni.chooseImage({
    count:5,
    sizeType: ['compressed'], //指定压缩图
    success:function(res){
        console.log(res)
    }
})

无

上传图片

如果只有一张图片

很显然 我们需要拿到

res.tempFilePaths0

多张就要遍历res.tempFilePaths

无

上传图片

onUploadProgress为上传进度回调

vm.presents 为进度百分比 根据这个可以加个进度条

代码语言：txt复制

let path = res.tempFilePaths[0]
uniCloud.uploadFile({
    filePath: path,
    cloudPath: 'dmhsq.jpg',
    onUploadProgress: function(progressEvent) {
        console.log(progressEvent);
        vm.presents = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
        );
    },
    success: function(res) {
        console.log(res)
        uni.showToast({
            icon: 'none',
            title: '上传成功',
            duration: 1500
        })
    }
});                        

我们选择了一张图片上传

无

无

可以看到这里上传成功了

无

获取图片

我们拿到了fileId 可以获取图片的临时下载地址

https://uniapp.dcloud.io/uniCloud/storage?id=gettempfileurl

代码语言：txt复制

let purl = res.fileID;
uni.showToast({
    icon: 'none',
    title: '上传成功',
    duration: 1500
})
uniCloud.getTempFileURL({
    fileList: [purl],
    success: function(res) {
        console.log(res)
    }
})

我们看一下 获取图片临时地址的结果

无

无

无无

无

看下效果

无

直接选择上传

文档给出了

无

代码语言：txt复制

uniCloud.chooseAndUploadFile({
    type: 'image',
    success: function(res) {
        console.log(res)
    }
})

大学之道亦在自身，努力学习，热血青春

有问题可以下方留言，看到了会回复哦

小程序·云开发 html javascript

0 人点赞