微信小程序-----利用云开发实现上传图片并且预览
2021/10/29 14:11:17
本文主要是介绍微信小程序-----利用云开发实现上传图片并且预览,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
效果图
过程描述
点击上传按钮并且选择图片
后上传到云存储,然后就能在页面上看到图片了
问题分析
为什么能看到图片:src=""
src又来自云存储
云存储的图片来自选择的图片
需求拆分
1.选择图片
2.上传到云存储
步骤
1.写页面
2.会用到这两个api
3.测试选择图片代码
4.上传至云存储
上传结果
5.完整代码
<view><button bindtap="upload">选择图片</button></view> <view>预览图片</view> <image src="{{uploadimg}}"></image>
// pages/news/news.js Page({ /** * 页面的初始数据 */ data: { uploadimg:'' }, upload(){ var that=this; wx.chooseImage({ count: 1, success (res) { // tempFilePath[0]可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths; // 图片名称,为了让每次能上传上去 const imgname=tempFilePaths[0].slice(11); console.log(tempFilePaths[0]) // 上传图片至云存储 wx.cloud.uploadFile({ cloudPath: `img/${imgname}.png`, // 上传至云端的路径 filePath: tempFilePaths[0], // 小程序临时文件路径 success: res => { // 返回文件 ID console.log(res.fileID) that.setData({ uploadimg:res.fileID }) }, fail: console.error }) } }) } })
这篇关于微信小程序-----利用云开发实现上传图片并且预览的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具