云存储
自己准备相关的照片,视频,音乐的素材
一:控制台上传文件
如下图所示
文件名命名限制
上传的文件命名限制如下,请注意规避:
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('上传照片成功') } }) } })
感谢大家,点赞,收藏,关注,评论!