云开发（微信-小程序）笔记（七）----云存储，你来了（上）

云存储

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

一：控制台上传文件

如下图所示

文件名命名限制

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

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 十进制）

显示文件详情内容

如下图所示

二：小程序方式上传文件所需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('上传照片成功')
      }
    })
  }
})

感谢大家，点赞，收藏，关注，评论！