在做小冰箱這個項目時，對物品的圖片需要有一個上傳功能。今天在這里講一下這個功能是如何實現的。

首先講述一下這個功能的完整描述：有一個上傳圖片的按鈕，點擊按鈕，彈出操作菜單：從手機相冊選擇，拍照。點擊從手機相冊選擇，調起圖片庫，選擇圖片；點擊拍照，調起攝像頭，點擊拍照按鈕，拍出照片。獲取圖片后，在上傳圖片按鈕下顯示預覽圖片。點擊表單確認按鈕，提交。

下面來看一下具體實現：

上傳圖片按鈕

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部署靜態圖片庫，才可以訪問到圖片資源

這就是小程序里用到的一個需要照片上傳的功能。

總結

以上是生活随笔為你收集整理的微信小程序上传图片到html,微信小程序-上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。