小程序拍照上传图片到服务器,微信小程序 拍照或从相册选取图片上传代码实例...

这篇文章主要介绍了微信小程序 拍照或从相册选取图片上传代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

upload.wxml

拍照选取照片上传

upload.js

// pages/upload/upload.js

Page({

data: {

imgData: []

},

uploadPhoto(e) { // 拍摄或从相册选取上传

let that = this;

wx.chooseImage({

count: 1, // 默认9

sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

success(res) {

let tempFilePaths = res.tempFilePaths; // 返回选定照片的本地路径列表

that.upload(that, tempFilePaths);

}

})

},

upload(page, path) { // 上传图片

wx.showToast({ icon: "loading", title: "正在上传……" });

wx.uploadFile({

url: '上传图片接口url', //后端接口

filePath: path[0],

name: 'file',

header: {

"Content-Type": "multipart/form-data"

},

success(res) {

if (res.statusCode != 200) {

wx.showModal({ title: '提示', content: '上传失败', showCancel: false });

return;

} else{

console.log("上传成功！ 可对返回的值进行操作，比如：存入imgData；");

}

},

fail(e) {

wx.showModal({ title: '提示', content: '上传失败', showCancel: false });

},

complete() {

wx.hideToast(); //隐藏Toast

}

})

}

})

ps：以上是单图上传，如果需要多图上传，请看下方：

// pages/publish/publish.js

Page({

data: {

imgData: []

},

uploadPhoto(e) { // 拍摄或从相册选取上传

let that = this;

wx.chooseImage({

count: 9 - that.data.imgData.length, // 默认最多上传9张

sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

success(res) {

let tempFilePaths = res.tempFilePaths; // 返回选定照片的本地路径列表

that.upload(that, tempFilePaths);

}

})

},

upload(page, path) { // 上传图片

let that = this;

wx.showToast({ icon: "loading", title: "正在上传……" });

for (var i=0; i

wx.uploadFile({

url: '上传图片接口url', //后端接口

filePath: path[i],

name: 'file',

header: app.globalData.header,

success(res) {

if (res.statusCode != 200) {

wx.showModal({

title: '提示',

content: '第' + i +'张图片上传失败',

showCancel: false

});

return;

} else {

console.log('第' + i +'张图片上传成功！可在此操作，比如：存入imgData;');

}

},

fail(e) {

wx.showModal({

title: '提示',

content: '第' + i +'张图片上传失败',

showCancel: false

});

},

complete() {

wx.hideToast(); //隐藏Toast

}

})

}

}

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。