微信云开发+vant weapp实现图片上传

index.wxml文件

 <van-uploaderfile-list="{{ imageFileList }}"bind:after-read="afterRead"multiple="{{true}}"max-count="3"bind:delete="imageDelete"
/>

index.js文件

  data: {value: '',imageFileList: [{url: 'https://img01.yzcdn.cn/vant/leaf.jpg',status: 'uploading',message: '上传中...',},{url: 'https://img01.yzcdn.cn/vant/tree.jpg',status: 'sucess',message: '上传失败',},],cloudPath: [],envId: '',checked: false},//封装上传图片函数,利用小程序云开函数uploadFilePromise(fileItem) {// TODO:优化-带上用户标示作为区分const imageName = fileItem?.url.slice(11, -4).slice(0,6);console.log(`imageName`, imageName)return wx.cloud.uploadFile({// 指定上传到的云路径cloudPath: `liuyan-content-images/${imageName}.png`,// 指定要上传的文件的小程序临时文件路径filePath: fileItem.url,});},// 文件读取完成后触发，event.detail.file: 当前读取的文件，再上传到图片服务器上afterRead(event) {wx.showLoading({title: '上传中...'})const { file } = event.detail //获取所需要上传的文件列表wx.cloud.init();const uploadTasks = file.map(fileItem => this.uploadFilePromise(fileItem));Promise.all(uploadTasks).then(data => {wx.hideLoading()wx.showToast({ title: '上传成功', icon: 'none' });const newFileList = data.map(item => ({ url: item.fileID }));this.setData({ imageFileList: this.data.imageFileList.concat(newFileList)});}).catch(() => {//存在有上传失败的文件wx.hideLoading()wx.showToast({title: '上传失败！',icon: 'none',})});}

微信云开发+vant weapp实现图片上传相关推荐

关于微信内置浏览器，打开图片上传功能，调用的问题
关于微信内置浏览器,打开图片上传功能,调用的问题前段时间,项目完结测试的时候,同事打开魅族手机测试,无意中发现一个奇葩的问题! 描述: 显示的是文件系统,列表式的,没有调用相机的功能图标,为什么呢? ...
微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件
标题微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件图片上传功能作为一个比较常见的功能,有时候需要在微信内置浏览器里打开,但是有些型号的手机会出现打不开的现象,点击 ...
电商生鲜网站开发（四）——后台开发：商品模块-图片上传/多条件拼接sql
电商生鲜网站开发(四)--后台开发:商品模块-图片上传/多条件拼接sql 增加商品上传图片更新商品删除商品批量上下架图片上传功能文件名UUID 通用唯一识别码(Universally Un ...
Java 开发笔记 - wangEditor 编辑器图片上传
Java 开发笔记 - wangEditor 编辑器图片上传前言转型 java 开发后入手的第一个项目,写写博客记录一下该项目使用的是 sping boot + mybatis plus + t ...
微信网页开发wx.chooseImage多图上传、预览（已解决）
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...
egg.js开发文章发布接口(图片上传)(表单数据接口)
后台的代码: 在//app/config/config.default.js文件里: 添加crsf 这也是解决post请求时报403 foibidden的方法 //解决跨域config.secur ...
阿里云使用js 实现OSS图片上传、获取OSS图片列表、获取图片外网访问地址(读写权限私有、读写权限公共);...
详情请参考:https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.763.ZgC59a 或者https://h ...
vue开发：移动端图片上传
因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传.在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题 ...
html读取oss_阿里云使用js 实现OSS图片上传、获取OSS图片列表(示例代码)
详情请参考:https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.763.ZgC59a 或者https://h ...

微信云开发+vant weapp实现图片上传

index.wxml文件

index.js文件

微信云开发+vant weapp实现图片上传相关推荐

最新文章

热门文章