微信小程序上传单张图片

wxml文件：

<view class="section1">

<view class="sectionTitle1">照 片：</view>

<view class='sectionCont1'>

<image wx:if="{{picflag}}" src='../../images/add.png' class='pic' bindtap='chooseimg'></image>

<view class='picbox' wx:if="{{!picflag}}">

<image src='../../images/close.png' class='close' bindtap='delimg' data-src='{{tempFilePaths}}'></image>

<image src='{{tempFilePaths}}' class='choosepic' mode='aspectFill'></image>

</view>

</view>

</view>

 

wcss文件：

.section{

width: 90%;

margin-left: 5%;

border-bottom: 1px solid #eee;

height: 90rpx;

line-height: 90rpx;

padding-top: 10rpx;

position: relative;

}

.sectionTitle{

float: left;

width:18%;

}

.sectionCont{

float: left;

height: 90rpx;

line-height: 90rpx;

padding-left:2%;

width: 78%;

font-size: 30rpx;

}

.sectionCont input{ height: 90rpx; line-height: 90rpx;}

.man{margin-right: 3%;}

.btn-area{border-top: 40rpx solid #f4f4f4;background: #f4f4f4;}

.btn-area button{width: 60%;margin-left: 20%;background: #179b16;color: #fff;}

 

.section1{

width: 90%;

margin-left: 5%;

border-bottom: 1px solid #eee;

padding-top: 10rpx;

position: relative;

height: 220rpx;

}

.sectionTitle1{

float: left;

width:18%;

}

.sectionCont1{

float: left;

padding-left:2%;

width: 78%;

font-size: 30rpx;

}

.pic{width: 60rpx;height: 60rpx;}

 

.picbox{position:absolute;height: 200rpx;width: 180rpx;border: 2rpx solid #ccc;}

.picbox .close{width: 50rpx;height: 50rpx;position: absolute;right: 0;top: 0;z-index: 999;}

.picbox .choosepic{width: 100%;height: 100%;}

js文件：

//选择图片

chooseimg: function () {

var that = this;

wx.chooseImage({

count: 1, // 默认9

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

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

success: function (res) {

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

console.log(res)

var tempFilePaths = res.tempFilePaths

that.setData({

tempFilePaths: tempFilePaths,

picflag: false

})

 

}

})

},

//删除图片

delimg: function (e) {

var that = this;

var val = e.currentTarget.dataset.src;

var arr = that.data.tempFilePaths;

console.log(val)

console.log(arr)

for (var i = 0; i < arr.length; i++) {

if (arr[i] == val) {

arr.splice(i, 1);

break;

}

}

that.setData({

tempFilePaths: arr,

picflag: true

})

},

//上传图片

goimages: function () {

var that = this

var tempFilePaths = that.data.tempFilePaths;

var uploadTask = wx.uploadFile({

url: app.wechatUrl('entry/wxapp/evaluateimg/xiwulife_scan'),

filePath: tempFilePaths[i],

method: 'POST',

header: {

'content-type': 'multipart/form-data'

},

name: 'file',

formData: {

},

success: function (res) {

}

})

uploadTask.onProgressUpdate((res) => {

wx.showLoading({

title: '上传中' + res.progress + '%',

})

})

},