官方文档https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage/api.html
点击【云开发】,进入云开发控制台,选中【存储】
目前有三种上传文件/图片方式:
第一种
直接从文件管理器将要上传的文件夹拖入控制台即可上传,支持拖入多个文件或文件夹。
第二种
点击【上传文件】,在文件管理器中选择需要上传的文件。
第三种
用小程序的代码来实现。
我们重点来说第三种方式:
<button class="buttonStyle" bindtap="upFile" plain="true">上传文件</button>
/**
* 小程序上传文件的代码
*/
upFile(){
wx.chooseImage({
count: 1,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success(res){
const tempFilePaths=res.tempFilePaths
wx.cloud.uploadFile({
cloudPath: 'newFile/nice_test.jpeg', // 上传至云端的路径
filePath: tempFilePaths[0], // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res)
},
fail: console.error
})
}
})
/* 写法二
wx.chooseImage({
success: chooseResult => {
// 将图片上传至云存储空间
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath: 'my-photo.png',
// 指定要上传的文件的小程序临时文件路径
filePath: chooseResult.tempFilePaths[0],
// 成功回调
success: res => {
console.log('上传成功', res)
},
})
},
})
*/
}
成功上传文件文件之后都会自动生成一个 FileID,这个ID是唯一的,往后对文件进行处理时,都会使用这个ID。
如上图单击文件图标便能查看详细信息,信息中的下载地址对应着一个网页地址,用浏览器打开可以看见自己上传的文件,说明这个文件已经上传成功,只要通过这个地址可以被任何人访问到。
换取临时链接
这个API能获取到临时的链接,有效期为两个小时。有效期过了之后重新获取一次即可。这个链接跟上述的下载地址对应的链接是不一样的。
/**
* 获取临时图片/文件链接
*/
getTempURL(){
wx.cloud.getTempFileURL({
// File ID 云平台可以看到
fileList:['cloud://cloud1-xxxxxxxxx.636c-cloud1-xxxxxxxxxxx-1312029360/newFile/nice_test.jpeg'],
success:res=>{
console.log(res.fileList[0])
},
fail:console.error
})
},
删除文件
fileList 里面对应的是文件ID。
点击【删除文件】的button按钮就可以删除文件
// 删除文件
deleteFile(){
wx.cloud.deleteFile({
fileList:['cloud://cloud1-3gt8fbau65eaac5f.636c-cloud1-3gt8fbau65eaac5f-1312029360/newFile/nice_test.jpeg'],
success:res=>{
console.log(res)
},
fail:console.error
})
},
下载文件
// 下载文件
downloadFile(){
wx.cloud.downloadFile({
fileID: 'cloud://cloud1-3gt8fbau65eaac5f.636c-cloud1-3gt8fbau65eaac5f-1312029360/newFile/nice_test.jpeg', // 文件 ID
success: res => {
// 返回临时文件路径
console.log(res.tempFilePath)
},
fail: console.error
})
}
PS:
以上几个对存储的文件的使用和修改,都是将 fileID 写死的。而往后在使用的时候,大多写成变量的形式,灵活获取要用到的文件。