云开发(微信-小程序)笔记(七)----云存储,你来了(上)

简介: 云开发(微信-小程序)笔记(七)----云存储,你来了(上)

云存储

自己准备相关的照片,视频,音乐的素材

一:控制台上传文件

如下图所示

e53c8837e4d840babdb4e2bcc89c0336.png

文件名命名限制

上传的文件命名限制如下,请注意规避:

1.不能为空
2.不能以 / 开头
3.不能出现连续 /
4.编码长度最大为850个字节
5.推荐使用大小写英文字母、数字,即 [a-z,A-Z,0-9] 和符号 -、!、_、.、* 及其组合
6.不支持 ASCII 控制字符中的字符上(↑),字符下(↓),字符右(→),字符左(←),分别对应 CAN(24),EM(25),SUB(26),ESC(27)
7.如果用户上传的文件或文件夹的名字带有中文,在访问和请求这个文件或文件夹时,中文部分将按照 URL Encode 规则转化为百分号编码。
8.不建议使用的特殊字符: ` ^ " \ { } [ ] ~ % # \ > < 及 ASCII 128-255 十进制
9.可能需特殊处理后再使用的特殊字符: , : ; = & $ @ + ? 空格 及ASCII 字符范围:00-1F 十六进制(0-31 十进制)以及7F(127 十进制)

显示文件详情内容

如下图所示

cc013601b1ac435ea02963e2f24a135c.png

二:小程序方式上传文件所需Api

wx.chooseImage(Object object)

相关参数

属性 类型 默认值 必填 说明
count number 9 最多可以选择的图片张数
sizeType Array. [‘original(原图)’, ‘compressed(压缩图)’] 所选的图片的尺寸
sourceType Array. [‘album(从相册选图)’, ‘camera(使用相机)’] 选择图片的来源
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

属性 类型 说明 最低版本
tempFilePaths Array. 图片的本地临时文件路径列表 (本地路径)
tempFiles Array. 图片的本地临时文件列表 1.2.0
tempFiles结构属性 类型 说明
path string 本地临时文件路径 (本地路径)
size number 本地临时文件大小,单位 B

UploadTask wx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。

相关参数

属性 类型 必填 说明 最低版本
url string 开发者服务器地址
filePath string 要上传文件资源的路径 (本地路径)
name string 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容
header Object HTTP 请求 Header,Header 中不能设置 Referer
formData Object HTTP 请求中其他额外的 form data
timeout number 超时时间,单位为毫秒 2.10.0
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

属性 类型 说明
data string 开发者服务器返回的数据
statusCode number 开发者服务器返回的 HTTP 状态码

三:上传文件案例

1.先建立一个页面cloud storage

(1)在app.json中的pages字段中添加如下

"pages/cloud storag/cloud storag", // 云存储页添加

2.在出现的cloud storag/cloud storag.wxml页面中定义一个按键

<!--pages/cloud storag/cloud storag.wxml-->
<button bindtap="chooseImg">上传图片</button>

3.编写cloud storag.js代码

// pages/cloud storag/cloud storag.js
Page({
  //选择上传的图片
  chooseImg(){
    wx.chooseImage({
      count: 1, //选择多少张图片
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],  //设置图片来源
      success: res => {
        this.uploadImg(res.tempFilePaths[0])   //将上传的第一张图片传入uploadImg方法中
      }
    })
  },
  //上传图片到云存储
  uploadImg(temFile){
    console.log('文件临时路径',temFile)
    wx.cloud.uploadFile({
      cloudPath: 'cat god 007.jpg',
      filePath: temFile, //文件路径
      success: res => {
        console.log('上传照片成功')
      }
    })
  }
})

感谢大家,点赞,收藏,关注,评论!

目录
相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
5天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
22 3
|
10天前
|
小程序 云计算 开发者
|
11天前
|
小程序
|
12天前
|
小程序 数据安全/隐私保护
|
11天前
|
小程序
|
15天前
|
小程序
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
484 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
536 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
111 7