微信小程序上传图片到html,微信小程序-上传图片

在做小冰箱这个项目时，对物品的图片需要有一个上传功能。今天在这里讲一下这个功能是如何实现的。

首先讲述一下这个功能的完整描述：有一个上传图片的按钮，点击按钮，弹出操作菜单：从手机相册选择，拍照。点击从手机相册选择，调起图片库，选择图片；点击拍照，调起摄像头，点击拍照按钮，拍出照片。获取图片后，在上传图片按钮下显示预览图片。点击表单确认按钮，提交。

下面来看一下具体实现：

上传图片按钮

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

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