小程序实现图片上传，并获取fileID存入数据库

小程序在上传图片时，需要获取相册图片或者相机拍照（choosemedia），得到数据后会在使用端建立一个缓存路径，获取到缓存路径以后，使用wx.uploadfile上传，如果按照正常的步骤进行，uploadfile函数将会在choosemedia返回的success中运行，而获取的fileID又在succe中赋值，但是由于js语言本身的回调能力弱，因此会产生回调地狱，因此无法对path赋值。（代码如下）

// pages/others/others.js
Page({data:{path:''},upfile:function(e){wx.chooseMedia({count: 1,mediaType: ['image','video'],sourceType: ['album', 'camera'],maxDuration: 30,camera: 'back',success(res) {console.log(res.tempFiles[0].tempFilePath)//缓存路径wx.cloud.uploadFile({cloudPath: 'img/'+Math.random()*100000+'.jpg',filePath: 'res.tempFiles[0].tempFilePath', // 文件路径success: res => {// get resource IDconsole.log(res.fileID)this.setdata({path:res.fileID})},fail: err => {// handle error}})}})},})

后面在一篇文章上看到解决办法，使用js异步函数解决，它的原理是创建多线程，不像上面的代码是单向的。

代码如下：

async getimg() {// 1.选择一张本地的照片const imageRes = await wx.chooseMedia({       //定义选择图片的返回值count:1,mediaType:['image'],sourceType:['album'],})console.log(imageRes);                        //返回的缓存参数// 2.获取图片缓存路径const imagePath = imageRes.tempFiles[0].tempFilePath// 3,上传到云存储// 动态生成名称的操作const timestamp = new Date().getTime() // 获取时间戳保证图片名称唯一const openid = "open_xx " // 获取openid防止同一时间, 不同的人上传了相同名称const extension = imagePath.split(".").pop()const imageName = `${timestamp}_${openid}.${extension}`// 调用API上传图片const uploadRes = await wx.cloud.uploadFile({filePath: imagePath,                        //使用上面获取到的缓存路径cloudPath: '跑步记录提交/'+imageName        // 默认上传到云端根目录})console.log(uploadRes);this.setData({path:uploadRes.fileID                   //获取fileID并赋值给path，方便存入数据库})console.log("网盘路径",uploadRes.fileID)},

注意，如果要上传多张图片，需要在获取图片缓存路径以后加循环，缓存路径为imageRes.tempFiles[i].tempFilePath

转载自：学全栈的灌汤包作品

小程序实现图片上传，并获取fileID存入数据库相关推荐

php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序多图片上传支持预览删除设置数量上限
github地址: https://github.com/Volcano-Yang/miniprogram-picture-upload Miniprogram-Picture-Upload 努力帮助 ...
微信小程序之图片上传、多图上传、头像上传、头像获取、图片上传失败问题解决
小程序用户授权获取用户头像,需点击才可以让用户选择是否授权. 图片上传失败问题解决图片上传一定要记得修改合法域名,不然会失败,而且找不到报错信息哟!并且域名采用 https 点击,用户授权,获取用 ...
【小程序开发原创】小程序裁剪图片上传头像，二维码源码
微信小程序图片裁剪工具,简单易用项目需求在做微信小程序的时候有个图片上传之前裁剪的需求,找过一些github中的项目,都不太理想,主要是没有办法自定义宽高,于是自己研究了一下,做了一个简单的图片 ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
小程序的图片上传和显示
在商城的发布页面,我们需要上传图片,存在云端,再显示在商品页面,可以参考这篇文章https://blog.csdn.net/Cheny_Yang/article/details/89033021 1. ...
微信小程序多图片上传全栈实战
本篇教程技术栈:springBoot(Java后端)+ 微信小程序.完整的图片上传教程. 页面截图,点击图片右上角按钮可以删除图片. 1.图片上传需要使用wx.uploadFile(Object o ...
【微信小程序】图片上传组件“mp-uploader“(weui)
使用示例 wxml <mp-uploader files="{{files}}" max-count="{{maximgs}}" max-size=& ...

小程序实现图片上传，并获取fileID存入数据库

小程序实现图片上传，并获取fileID存入数据库相关推荐

最新文章

热门文章