小程序云开发——图片视频资源上传云端并返回云端路径

在现在的应用中，包括小程序，图片视频等元素是产品必不可少的一部分。如果一个产品仅支持文字，将会很单调。有时候我们需要将图片视频上传到云端或者服务器。我这里将介绍在小程序中怎么上传图片和视频到云端，并返回云端路径，可以将这个云端路径存入数据库，下次加载云端图片和视频就从数据库中取出相应的云端路径，再从云端获取相应的图片视频资源加载到小程序端。

再小程序云开发中，提供了API用于实现本地图片视频等文件的上传，上传成功后会执行 success 回调函数，可以在回调函数里面获取图片和视频资源的云端路径（实际上返回的是云端的 fileID）。

文件上传调用同一个方法：

文件的上传其实就是从本地临时路径到云端路径。
临时路径（filePath）：选择图片和视频产生的路径，拍照和录视频也是这个路径。
云端路径（cloudPath）：也就是文件在云端的名字，自己随便取，但要符合命名规则。

//写在方法里
var that = this;
var filePath = res.tempFilePaths[0]    //这是选择图片后产生的临时路径
let timestamp = Date.parse(new Date());
const cloudPath = timestamp + filePath.match(/\.[^.]+?$/)[0]
//上传到云存储
wx.cloud.uploadFile({cloudPath, //在云端的文件名称filePath, //临时文件路径success: res => {console.log(res.fileID);that.setData({imgpathDB: res.fileID //res.fileID是文件上传成功后返回的值，从云端调用视频图片资源需要该值})}
})

小程序云开发——图片视频资源上传云端并返回云端路径相关推荐

微信小程序云开发——图片展示，视频播放案例
这次是帮朋友写的一个简单的小程序.考虑到成本和页面简单的问题,我就决定用小程序云开发来进行开发.后来实际开发的时候发现,页面用到图片实在是太多.CDN流量一个月5G根本不够用.但是我看到了数据库一天可 ...
微信小程序云开发图片上传完整代码附效果图
在app.json里面加如下代码, 使用 WeUI组件库.点击跳转 "useExtendedLib": {"weui": true}, 先看效果图 wxml & ...
获取微信html代码,微信小程序云开发js抓取网页内容
最近在研究微信小程序的云开发功能.云开发最大的好处就是不需要前端搭建服务器,可以使用云端能力,从零开始写出来一个能上线的微信小程序,避免了买服务器的开销,对于个人来尝试练手微信小程序从前端到后台的开发 ...
html访问微信云数据库,node.js 抓取网页内容（针对微信小程序云开发）
最近在研究微信小程序的云开发功能.云开发最大的好处就是不需要前端搭建服务器,可以使用云端能力,从零开始写出来一个能上线的微信小程序,避免了买服务器的开销,对于个人来尝试练手微信小程序从前端到后台的开发 ...
【微信小程序云开发】笔记
获取AppID 云开发必须要有AppID,去链接(https://mp.weixin.qq.com/wxopen/waregister?action=step1)使用邮箱进行注册,注册后使用AppID ...
借助小程序云开发实现小程序的登陆注册功能
小程序云开发讲解视频:https://edu.csdn.net/course/detail/9604 有了云开发我们不仅可以方便的获取到用户的openid,还可以通过云开发的数据库来存储用户信息,进而 ...
微信小程序云开发 --实现加法操作
入门学习,有错请纠正. 整体思路: wxml中button的点击事件触发index.js里的qiuhe函数调用云函数,把数据传给云函数里的add下面的数据云函数接受到数据后,进行计算,并返回结果 ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
微信小程序-云开发上传文件、图片
文章目录一.前言二.功能简介 1.选择微信聊天记录中的文件 2.选择本地相册/拍照图片 3.上传功能三.实现代码 1.选择聊天文件函数(js) 2.选择相册函数(js) 3.上传文件函数(js) ...

小程序云开发——图片视频资源上传云端并返回云端路径

文件上传调用同一个方法：

小程序云开发——图片视频资源上传云端并返回云端路径相关推荐

最新文章

热门文章