微信小程序实现一张或多张图片上传(云开发)


Posted in Javascript onSeptember 25, 2019

一、简介:

这篇文章向大家展示的是把图片上传到云数据库中,这是我做商城项目时研究的。大家都知道,云开发是没有后端开发的,所有图片我们要放到云数据库中。

二、素材图:

微信小程序实现一张或多张图片上传(云开发)

三、效果图:

微信小程序实现一张或多张图片上传(云开发)

微信小程序实现一张或多张图片上传(云开发)

四、代码:

wxml:

<!--miniprogram/pages/fb/fb.wxml-->
<view class='pages'>
 <view class='top'><text class='top_name'>商品图片:</text></view>
 <!-- 图片 -->
 <view class="images_box">
  <block wx:key="imgbox" wx:for="{{imgbox}}">
   <view class='img-box'>
    <image class='img' src='{{item}}'></image>
    <view class='img-delect' data-deindex='{{index}}' bindtap='imgDelete1'>
     <image class='img' src='../../images/delect.png'></image>  
    </view>
   </view>
  </block>
  <view class='img-box' bindtap='addPic1' wx:if="{{imgbox.length<9}}">
   <image class='img' src='../../images/add_image.png'></image>  
  </view>
 </view>
 <button bindtap='fb'>上传图片</button>
</view>

wxss:

/* miniprogram/pages/fb/fb.wxss */
page{
 background-color: rgba(200, 198, 201, 0.527);
}
.pages{
 width: 98%;
 margin: auto;
 overflow: hidden;
}
.top{
 width: 100%;
 overflow: hidden;
 margin: auto;
 font-size: 50rpx;
 background-color: white;
 border-left: 8rpx solid rgb(9, 245, 60);
 border-bottom: 1rpx solid rgba(117, 116, 116, 0.527);
}
.top_name{
 margin-left: 20rpx;
}
/* 图片 */
.images_box{
 width: 100%;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: flex-start;
 background-color: white;
}
.img-box{
 border: 5rpx;
 border-style: solid;
 border-color: rgba(0, 0, 0, 0.452);
 width: 200rpx;
 height: 200rpx;
 margin-left: 35rpx;
 margin-top: 20rpx;
 margin-bottom: 20rpx;
 position: relative;
}
/* 删除图片 */
.img-delect{
 width:50rpx;
 height:50rpx;
 border-radius:50%;
 position:absolute;
 right:-20rpx;
 top:-20rpx;
}
.img{
 width: 100%;
 height: 100%;
}
.jiage{
 height: 60rpx;
 width: 90%;
 margin-left: 5%;
 margin-right: 5%;
 background-color: white;
 display: flex;
 justify-content: flex-start;
}
.rmb{
 width: 280rpx;
 border: 2rpx solid rgb(199, 197, 197);
}
button{
 margin-top: 20rpx;
 background-color: green;
}
.radio-group{
 display: flex;
}

js:

// pages/fb/fb.js
const app = getApp()
const db = wx.cloud.database();//初始化数据库
Page({
 /**
  * 页面的初始数据
  */
 data: {
  imgbox: [],//选择图片
  fileIDs: [],//上传云存储后的返回值
 },

 // 删除照片 &&
 imgDelete1: function (e) {
  let that = this;
  let index = e.currentTarget.dataset.deindex;
  let imgbox = this.data.imgbox;
  imgbox.splice(index, 1)
  that.setData({
   imgbox: imgbox
  });
 },
 // 选择图片 &&&
 addPic1: function (e) {
  var imgbox = this.data.imgbox;
  console.log(imgbox)
  var that = this;
  var n = 5;
  if (5 > imgbox.length > 0) {
   n = 5 - imgbox.length;
  } else if (imgbox.length == 5) {
   n = 1;
  }
  wx.chooseImage({
   count: n, // 默认9,设置图片张数
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
   success: function (res) {
    // console.log(res.tempFilePaths)
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths

    if (imgbox.length == 0) {
     imgbox = tempFilePaths
    } else if (5 > imgbox.length) {
     imgbox = imgbox.concat(tempFilePaths);
    }
    that.setData({
     imgbox: imgbox
    });
   }
  })
 },

 //图片
 imgbox: function (e) {
  this.setData({
   imgbox: e.detail.value
  })
 },


 //发布按钮
 fb: function (e) {
  if (!this.data.imgbox.length) {
   wx.showToast({
    icon: 'none',
    title: '图片类容为空'
   });
  } else {
    //上传图片到云存储
    wx.showLoading({
     title: '上传中',
    })
    let promiseArr = [];
    for (let i = 0; i < this.data.imgbox.length; i++) {
     promiseArr.push(new Promise((reslove, reject) => {
      let item = this.data.imgbox[i];
      let suffix = /\.\w+$/.exec(item)[0];//正则表达式返回文件的扩展名
      wx.cloud.uploadFile({
       cloudPath: new Date().getTime() + suffix, // 上传至云端的路径
       filePath: item, // 小程序临时文件路径
       success: res => {
        this.setData({
         fileIDs: this.data.fileIDs.concat(res.fileID)
        });
        console.log(res.fileID)//输出上传后图片的返回地址
        reslove();
        wx.hideLoading();
        wx.showToast({
         title: "上传成功",
        })
       },
       fail: res=>{
        wx.hideLoading();
        wx.showToast({
         title: "上传失败",
        })
       }

      })
     }));
    }
    Promise.all(promiseArr).then(res => {//等数组都做完后做then方法
     console.log("图片上传完成后再执行")
     this.setData({
      imgbox:[]
     })
    })

   }
 },

})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的图片懒加载js
Jun 30 Javascript
JS上传前预览图片实例
Mar 25 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
深入探讨前端框架react
Dec 09 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
js判断两个数组相等的5种方法
May 06 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 #Javascript
layer 关闭指定弹出层的例子
Sep 25 #Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 #Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 #Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 #Javascript
layui prompt 设置允许空白提交的方法
Sep 24 #Javascript
微信小程序制作扭蛋机代码实例
Sep 24 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
JS获取父节点方法
2009/08/20 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
利用python批量检查网站的可用性
2016/09/09 Python
python的常用模块之collections模块详解
2018/12/06 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
劳动之星获奖感言
2014/02/01 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
主题实践活动总结
2014/05/08 职场文书
学风建设主题班会
2015/08/17 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书