微信小程序-上传图片

在做小冰箱这个项目时，对物品的图片需要有一个上传功能。今天在这里讲一下这个功能是如何实现的。
首先讲述一下这个功能的完整描述：有一个上传图片的按钮，点击按钮，弹出操作菜单：从手机相册选择，拍照。点击从手机相册选择，调起图片库，选择图片；点击拍照，调起摄像头，点击拍照按钮，拍出照片。获取图片后，在上传图片按钮下显示预览图片。点击表单确认按钮，提交。
下面来看一下具体实现：

上传图片按钮

html :

<form bindsubmit="formSubmit" bindreset="formReset">
<view class="sec sec_image">
    <view class="label">图片：</view>
         <input class="input" disabled="true" placeholder="上传图片" placeholder-style="color:#ff4700;" bindtap="uploadImg"/>
    </view>
    <view class="sec sec_preview" wx:if="{{goods_photo_flag}}">
        <image class="goods_photo" mode="aspectFit" src="{{goods_photo}}"></image>
    </view>
</form>

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:

<view wx:if="{{flag_tp}}" class="btn_photo" bindtap="takePhoto"></view> 
<camera wx:if="{{flag_tp}}" class="sec_camera" device-position="back" flash="off" binderror="error"></camera>

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部署静态图片库，才可以访问到图片资源

这就是小程序里用到的一个需要照片上传的功能。