效果:
1,xhtml其中wx:for='{{picArr}} '是所有图像rdbz,src是img的图像路径; 自定义data-src是当前单击的图像加载工作(准备预览;自定义data-list是所有图像的rdbz )预览)
block wx : key=' img box ' wx : for=' { picarr } '
view class='add-pic '
imageclass=' add-pic ' data-list=' { { picarr } } ' data-src=' { { URL prev '/zdhx/wxa 018/getimg? name=' item.nowurl } } ' src=' { { URL prev '/zdhx/wxa 018/getimg? name=' item.nowurl } '数据-索引=' { {索引} } ' bind tap=' pic preview '/image
view class=' img-de ' bind tap=' delete img ' data-index=' { index } "
icon type='clear' size='20' /
/view
/view
/block
点击//号上传样式自己写
view class='add-pic '
view class=' BTN ' bind tap=' choose img '/view
/view
http://www.Sina.com/http://www.Sina.com/data {
URL prev : server interface.URL prev,//urlPrev是接口ip地址letserverinterface=require (' ./utils/server.js
picArr: [ ],
arrPicSave:[ ],
}
() )
//上传图像
选择img :功能(
let that=this;
wx.chooseImage({ (
count: 9,
大小类型: [ ],
sourceType: ['album ',' camera'],
success :功能(RES ) {
lettempfilepaths=RES.tempfile paths
for(letI=0; i tempFilePaths.length; I ) {
wx.uploadFile({ (
URL : that.data.URL prev '/zdhx/wxa 018/upload task ',
文件路径: tempfile paths [ I ],
名称: '文件',
formData: {
(,
success :功能(RES ) {
wx.hideLoading (;
letimgelist=that.data.picarr.concat (JSON.parse (RES.data ).entity );
that.setData({ (
picArr: imgeList
);
}
);
wx.showLoading({ (
title: '正在上传中…',
() )
}
(,
故障:功能(RES )
console.log(RES,'失败');
(,
完成:功能(RES ) }、
() )
(,
//删除图像
delete img :功能(e ) {
let that=this;
let index=e.current target.dataset.index;
let images=that.data.picArr;
images.splice (索引,1 );
that.setData({ (
picArr: images
);
(,
//图像预览
pic preview :功能{
let _this=this;
let urlPrev=_this.data.urlPrev
xhtml的data-src和data-list获取当前单击的src以及接口返回的所有src
varsrc=event.current target.dataset.src;
var imglist=event.current target.dataset.list;
//每次单击图像时,首先清空数组
_this.setData({ (
arrPicSave: []
() )
//遍历多少张图像,将字符串转换为数组并添加到arrPicSave
for(varI=0; i imgList.length; I ) {
varforeachdata=URL prev '/zdhx/wxa 018/getimg? name=' imgList[i].nowURL.split (
_ this.data.arrpicsave.push (foreach data );
}
//预览
wx.previewImage({ (
current: src,//当前单击预览的图像
URLs : _ this.data.arrpicsave//左右侧滑的所有照片
() )
(,