在做小冰箱这个项目时，对物品的图片需要有一个上传功能。今天在这里讲一下这个功能是如何实现的。
首先讲述一下这个功能的完整描述：有一个上传图片的按钮，点击按钮，弹出操作菜单：从手机相册选择，拍照。点击从手机相册选择，调起图片库，选择图片；点击拍照，调起摄像头，点击拍照按钮，拍出照片。获取图片后，在上传图片按钮下显示预览图片。点击表单确认按钮，提交。
下面来看一下具体实现：
上传图片按钮
html :
图片：
script :
data = {
statApi : config.statApi,
baseApi : config.baseApi, //http://127.0.0.1
goods_photo: '',
goods_photo_flag: false,
goods_photo_url: '',
flag_tp: false
}
methods = {
uploadImg () {
console.log('shangchan')
let _this = this
wx.showActionSheet({
itemList: ['从手机相册选择', '拍照'],
success (res) {
console.log(res.tapIndex)
if (res.tapIndex == 0) {
_this.chooseImage()
}
if (res.tapIndex == 1) {
_this.toTakePhoto()
}
},
fail (res) {
console.log(res.errMsg)
}
})
}
}
从手机相册选择
chooseImage() {
let _this = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
console.log('从本地选择相片成功')
_this.goods_photo = tempFilePaths[0]
_this.goods_photo_flag = true
_this.$apply()
_this.uploadImg()
}
})
}
拍照
html:
style:
.sec_camera {
width: 100%;
height: 500rpx;
position: fixed;
top: 0;
z-index: 10;
}
.btn_photo {
width: 100rpx;
height: 100rpx;
border-radius: 100rpx;
position: fixed;
z-index: 10;
left: 50%;
top: 510rpx;
transform: translateX(-50%);
background-color: lavender;
}
script :
toTakePhoto() {
this.flag_tp = true
this.$apply()
}
takePhoto() {
console.log('takePhoto')
let _this = this
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
_this.goods_photo = res.tempImagePath
console.log('拍照成功')
_this.goods_photo_flag = true
_this.$apply()
_this.uploadImg()
}
})
}
上传图片到静态资源库
uploadImg() {
let _this = this
wx.uploadFile({
// url: 'http://127.0.0.1/images/upload', //仅为示例，非真实的接口地址
url: _this.baseApi+'/images/upload', //仅为示例，非真实的接口地址
filePath: _this.goods_photo,
name: 'file',
formData: {
'user': 'test'
},
success (res){
const data = JSON.parse(res.data)
console.log('从本地上传相片到服务器成功')
_this.goods_photo_url = data.image_url
_this.flag_tp = false
_this.$apply()
},
fail (res){
console.log('从本地上传相片到服务器失败')
_this.flag_tp = false
_this.$apply()
console.log(res)
}
})
}
服务器上传node实现
var express = require('express');
var app = express();
var formidable = require('formidable');
var fs = require('fs');
app.use('/statics', express.static('statics'));
app.post('/upload', function (req, res) {
var form = new formidable.IncomingForm();
form.parse(req, function(error, fields, files) { fs.writeFileSync("/Users/xz/files/statics/images_user/goods_photos/"+files.file.name,fs.readFileSync(files.file.path));
let image_url = "/statics/images_user/goods_photos/" + files.file.name
res.json({'success':true,'msg':'上传成功！','image_url':image_url});
});
});
module.exports = app;
表单提交
formSubmit(e) {
let form_data = {
url : this.goods_photo_url
}
let _this = this
$.post({
url: '/fridgeGoods/addFridgeGoods',
method: 'POST',
data: form_data,
success: function (res) {
if(res.data.err_code == 0){
//提交成功
}
}
})
}
注意： 要用NGINX部署静态图片库，才可以访问到图片资源
这就是小程序里用到的一个需要照片上传的功能。
