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

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

云存储

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

一:控制台上传文件

如下图所示

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('上传照片成功')
      }
    })
  }
})

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

目录
相关文章
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
28 0
|
15天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
15天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
15天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
15天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
30 0
|
15天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
38 3
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
35 2
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
29 0