介绍 & lt; !——miniprogram/页面/fb/fb.wxml——比;
& lt; view 类=& # 39;页面# 39;比;
,& lt; view 类=& # 39;顶部# 39;祝辞& lt; text 类=& # 39;top_name& # 39;在商品图片:& lt;/text> & lt;/view>
,& lt; !——,图片,——比;
,& lt; view 类=癷mages_box"比;
& lt;才能block 天气:关键=癷mgbox",天气:为=皗{imgbox}}“比;
,,& lt; view 类=& # 39;img-box& # 39;比;
,,,& lt; image 类=& # 39;img # 39;, src=https://www.yisu.com/zixun/的{{项}}>
<按钮bindtap=甪acebook’>上传图片> /*, miniprogram/页面/fb/fb.wxss */页面{
,背景颜色:rgba (200,, 198,, 201,, 0.527);
}
.pages {
,宽度:98%;
保证金:大敌;汽车;
,溢出:隐藏;
}
.top {
,宽度:100%;
,溢出:隐藏;
保证金:大敌;汽车;
,字体大小:50 rpx;
,背景颜色:白色;
,border-left: 8 rpx solid rgb(9日,245年,60);
,边界底部:1 rpx solid rgba (117,, 116,, 116,, 0.527);
}
.top_name {
,margin-left: 20 rpx;
}/*,图片,*/.images_box {
,宽度:100%;
,显示:flex;
,flex-direction:行;
,flex-wrap:包装;
,justify-content: flex-start;
,背景颜色:白色;
}
.img-box {
,边界:5 rpx;
,边框样式:固体;
边框颜色:大敌;rgba (0, 0, 0, 0.452);
,宽度:200 rpx;
,身高:200 rpx;
,margin-left: 35 rpx;
,margin-top: 20 rpx;
,margin-bottom: 20 rpx;
,位置:相对;
}/*,删除图片,*/.img-delect {
,宽度:50 rpx;
,高度:50 rpx;
,这个特性:50%;
,位置:绝对;
,右:-20 rpx;
,最高:-20 rpx;
}
img {
,宽度:100%;
,高度:100%;
}
.jiage {
,高度:60 rpx;
,宽度:90%;
,margin-left: 5%;
,margin-right: 5%;
,背景颜色:白色;
,显示:flex;
,justify-content: flex-start;
}
.rmb {
,宽度:280 rpx;
,边界:2 rpx solid rgb (199,, 197,, 197);
}
按钮{
,margin-top: 20 rpx;
,背景颜色:绿色;
}
.radio-group {
,显示:flex;
} //,/fb/fb.js页面
const app =, getApp ()
const db =, wx.cloud.database();//初始化数据库
页面({/* *
*,才能页面的初始数据
,*/,数据:{
,,imgbox:[],//选择图片
,,文件标识:[],//上传云存储后的返回值
},
,//删除照片,,,
,imgDelete1: function (e), {
let 才能;that =,;
let 才能;index =, e.currentTarget.dataset.deindex;
let 才能;imgbox =, this.data.imgbox;
imgbox.splice才能(指数,1)
that.setData({才能
,,imgbox: imgbox
,,});
},
,//选择图片,,,,
,addPic1: function (e), {
var 才能;imgbox =, this.data.imgbox;
console.log才能(imgbox)
var 才能;that =,;
var 才能;n =, 5;
if 才能;(5,祝辞,imgbox.length 祝辞,0),{
,,n =, 5,安康;imgbox.length;
,,},else if (==imgbox.length 5), {
,,n =, 1;
,,}
wx.chooseImage({才能
,,,数:n,,//,默认9日设置图片张数
,,,sizeType:[& # 39;原始# 39;,,& # 39;压缩# 39;],,//,可以指定是原图还是压缩图,默认二者都有
,,,sourceType:[& # 39;专辑# 39;,,& # 39;相机# 39;],,//,可以指定来源是相册还是相机,默认二者都有
,,,成功:function (res), {
,,,//,console.log (res.tempFilePaths)
,,,//,返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
,,,var tempFilePaths =res.tempFilePaths
,,,if (imgbox.length ==, 0), {
,,,,imgbox =tempFilePaths
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下微信小程序如何实现一张或多张图片上传,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>一、简介:
这篇文章向大家展示的是把图片上传到云数据库中,这是我做商城项目时研究的。大家都知道,云开发是没有后端开发的,所有图片我们要放到云数据库中。
<强>二、素材图:
<强>四、代码:
wxml:
wxs:
js:
