在本地模拟上传图片
- 点击上传图片按钮，显示图片到本地
wxss部分
<view class="all">
<view class="middle">
<image src="{
{img}}"></image>
</view>
<view class="button" bindtap="click_up">上传自拍</view>
<view class="button" bindtap="click_next">开始分析</view>
</view>
js逻辑部分代码
click_up: function () {
wx.showModal({
cancelText: '相机',
confirmText: '相册',
content: '您想要通过什么方式上传图片',
fail: (res) => {
},
success: (res) => {
if (res.confirm) {
console.log('用户点击确定')
wx.chooseImage({
complete: (res) => {},
count: 1,
fail: (res) => {},
sizeType: [],
sourceType: ['album'],
success: (result) => {
console.log(result);
type = 'album';
size = result.tempFiles["0"].size;
this.setData({
img: result.tempFilePaths[0]
})
navi = true;
},
})
} else if (res.cancel) {
console.log('用户点击取消')
wx.chooseImage({
complete: (res) => {},
count: 1,
fail: (res) => {},
sizeType: [],
sourceType: ['camera'],
success: (result) => {
console.log(result);
type = 'camera';
size = result.tempFiles["0"].size;
this.setData({
img: result.tempFilePaths[0]
})
navi = true;
},
})
}
},
title: '注意',
})
点击跳转到下一个页面部分逻辑代码
click_next: function () {
if (navi && this.data.img != "../../img/02_face.png") {
wx.navigateTo({
url: '/pages/waiting/waiting?file=' + this.data.img + '&type=' + type + "&size=" + size,
complete: (res) => {},
fail: (res) => {},
success: (result) => {},
})
} else {
wx.showModal({
title: '温馨提示',
content: '请上传图片',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
},
- css样式代码
.background {
position: absolute;
z-index: -99;
width: 100%;
height: 100%;
}
.all {
width: 100%;
height: 100%;
}
.middle>image {
width: 100%;
height: 100%;
}
.middle {
width: 546rpx;
height: 702rpx;
margin: auto;
border: solid 8rpx #fff;
position: relative;
top: 240rpx;
}
.button {
width: 290rpx;
height: 60rpx;
background-color: #f1f1f1;
border-radius: 18rpx;
margin: 0 auto 30rpx auto;
position: relative;
top: 300rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
}
page {
height: 100%;
width: 100%;
- 完整js代码
// pages/img/img.js
var navi = false;
var type, size;
Page({
/**
* 页面的初始数据
*/
data: {
img: "../../img/02_face.jpg"
},
click_up: function () {
wx.showModal({
cancelText: '相机',
confirmText: '相册',
content: '您想要通过什么方式上传图片',
fail: (res) => {
},
success: (res) => {
if (res.confirm) {
console.log('用户点击确定')
wx.chooseImage({
complete: (res) => {},
count: 1,
fail: (res) => {},
sizeType: [],
sourceType: ['album'],
success: (result) => {
console.log(result);
type = 'album';
size = result.tempFiles["0"].size;
this.setData({
img: result.tempFilePaths[0]
})
navi = true;
},
})
} else if (res.cancel) {
console.log('用户点击取消')
wx.chooseImage({
complete: (res) => {},
count: 1,
fail: (res) => {},
sizeType: [],
sourceType: ['camera'],
success: (result) => {
console.log(result);
type = 'camera';
size = result.tempFiles["0"].size;
this.setData({
img: result.tempFilePaths[0]
})
navi = true;
},
})
}
},
title: '注意',
})
},
click_next: function () {
if (navi && this.data.img != "../../img/02_face.png") {
wx.navigateTo({
url: '/pages/waiting/waiting?file=' + this.data.img + '&type=' + type + "&size=" + size,
complete: (res) => {},
fail: (res) => {},
success: (result) => {},
})
} else {
wx.showModal({
title: '温馨提示',
content: '请上传图片',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})