小程序选择、预览、删除、上传图片

上次写了篇上传图片的文章：小程序上传图片及预览图片 ，还缺少一点功能，今天做了另一种删除删除样式，加上上传图片到服务器功能；

wxml

删除

上传图片

wxss

/* 上传图片 */

.upImage {

padding:10px;

margin-top:10px;

}

.upImage-list {

display: flex;

flex-wrap: wrap;

}

.image-li {

margin-right:10px;

margin-bottom:10px;

width: calc((100vw -50px) / 4);

height: calc((100vw -50px) / 4);

border:1pxsolid#fff;

border-radius:10px;

overflow:hidden;

position:relative;

}

.image-li:first-child {

display: flex;

align-items:center;

justify-content:center;

color:#eee;

}

.image-li:first-child view {

font-size: 100rpx;

}

.image-li:nth-child(4n) {

margin-right: 0;

}

.image-li image {

width: 100%;

height: 100%;

}

.image-li text {

position:absolute;

text-align:center;

bottombottom: 0;

left: 0;

width: 100%;

font-size: 24rpx;

background: rgba(0, 0, 0, 0.5);

color:#fff;

}

.upImage button{

background: rgba(0, 0, 0, 0);

color:#fff;

border:1pxsolid#fff;

}

JS

data:{

imgs: [] , // 图片临时储存

},

/**

* 选择图片点击

*/

chooseImage:function(){

let that =this;

wx.chooseImage({

// count: 1, // 默认9

sizeType: ['original', 'compressed'],// 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'],// 可以指定来源是相册还是相机，默认二者都有

success:function(res) {

// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

vartempFilePaths = res.tempFilePaths

let imgs = that.data.imgs;

for(let i =0; i

imgs.push(tempFilePaths[i])

}

that.setData({

imgs: imgs

})

}

})

},

/**

* 预览图片

*/

previewImage:function(e){

let _index = e.currentTarget.dataset.index;

let list =this.data.imgs;

let current = list[_index];

wx.previewImage({

current: current,// 当前显示图片的http链接

urls: list// 需要预览的图片http链接列表

})

},

/**

* 删除图片

*/

delImage:function(e){

let _index = e.currentTarget.dataset.index;

let previewImage =this.data.imgs;

console.log(previewImage)

previewImage.splice(_index, 1);

this.setData({

imgs: previewImage

})

},

/**

* 上传图片

*/

uploadImage:function(e){

let imgs =this.data.imgs;

for(let i = 0; i

wx.uploadFile({

url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址

filePath: imgs[i],

name: 'file',

formData: {

'user': 'test'

},

success:function(res) {

vardata = res.data

//do something

}

})

}

},