- 需求是让用户通过手机相册或者手机摄像头拍照上传图片
- 代码示例如下：
// pages/upPicture/upPicture.js
import utils from '../../utils/util.js';
import {
Interface,
Config
} from '../../utils/config.js';
const Host = 'http://XXXX'; //图片上传接口
Page({
/**
* 页面的初始数据
*/
data: {
disabled: false,
imgList: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
ChooseImage() { //选择图片或拍照
wx.chooseImage({
count: 1, //默认9，像微信一样最大选9张
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择、拍照两个参数
success: (res) => {
if (this.data.imgList.length != 0) {
if (this.data.imgList.length == 1) {
wx.showModal({
title: '提示',
content: '最多只能选一张',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) { }
}
})
} else {
this.setData({
imgList: this.data.imgList.concat(res.tempFilePaths)
})
}
} else {
this.setData({
imgList: res.tempFilePaths
})
}
}
});
},
ViewImage(e) { //点击查看大图
wx.previewImage({
urls: this.data.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) { //删除图片
wx.showModal({
title: '删除',
content: '确定要删除吗？',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
this.data.imgList.splice(e.currentTarget.dataset.index, 1);
this.setData({
imgList: this.data.imgList
})
}
}
})
},
upPicture: function () { //上传图片
var _this = this;
if (_this.data.imgList.length != 0) {
wx.showLoading({
title: '运行中...',
})
this.setData({
disabled: true
});
wx.uploadFile({
header: {
'content-type': 'multipart/form-data;charset=utf-8'
}, // 设置请求的 header
url: Host + Interface.upPicuture,
filePath: _this.data.imgList[0], //微信是获取到本地的图片路径
name: 'multipartRequestFile', //需要一个前后端统一的fileName名字
formData: { //其他参数用formData传递
openId: wx.getStorageSync('openId') || ''
},
success: function (res) {
wx.hideLoading();
_this.setData({
disabled: false
});
if (res.statusCode == 200 && JSON.parse(res.data).status == 'success') {
wx.navigateTo({
url: '../result/result?id= ' + JSON.parse(res.data).id
})
return
} else {
wx.showToast({
title: JSON.parse(res.data).message,
icon: 'none',
duration: 1000,
mask: true
});
}
return
},
fail: function (res) {
wx.hideLoading();
_this.setData({
disabled: false
});
wx.showToast({
title: '请求错误',
icon: 'none',
duration: 1000,
mask: true
});
}
})
} else {
wx.showModal({
title: '提示',
content: '请选择一张图片',
})
return;
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
