在微信公众号网页开发时，遇到了图片上传的问题，查看了微信的开发者文档，里面的资料比较全。接着我们看一下整个的流程
1、config权限配置
url:'wx_getConfig',
type:'get',
dataType:'json',
async:false,
success:function(data){
var appId = data[<span style="color: #].appId;
var timestamp = data[<span style="color: #].
var nonceStr = data[<span style="color: #].nonceS
var signature = data[<span style="color: #].
wx.config({
debug: false,//调试模式
当为tru时，开启调试模式
appId: appId,
timestamp: timestamp.toString(),//签名时间戳
nonceStr: nonceStr, //生成签名的随机串
signature: signature,//签名
jsApiList: ['chooseImage','uploadImage','getLocalImgData','downloadImage'],
success:function(){
alert("配置成功")
fail:function(){
alert("配置失败")
error:function(){
alert("error");
这一步，在调试的时候， 会报config:invalid signature，如果出现这个错误，建议按一下顺序去检查
1.确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。2.确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。3.确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。4.确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。5.确保一定缓存access_token和jsapi_ticket。
2、config配置成功
&& 当config配置成功后，就会执行ready函数，所有的操作必须等到config配置完成后才会执行，如果是页面加载就执行的操作，就必须放在ready中执行。如果是在被触发时执行的操作，则不需要放在ready中
wx.ready(function () {
// 在这里调用 API
wx.checkJsApi({
jsApiList: [
'chooseImage',
'uploadImage',
'getLocalImgData',
'downloadImage'
success: function (res) {
console.log(JSON.stringify(res));
3、调取摄像头和相册
function takePicture(nums) {
wx.chooseImage({
count: <span style="color: #,
needResult: <span style="color: #,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (data) {
localIds = data.localIds[<span style="color: #];
// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
var num1 =
wxuploadImage(localIds,num1);
wxgetLocalImgData(localIds,num1);
fail: function (res) {
alterShowMessage("操作提示", JSON.stringify(res), "<span style="color: #", "确定", "", "", "");
4、上传到微信服务器
function wxuploadImage(e,num) {
var $hiddenImg= $(".hiddenImg");
wx.uploadImage({
localId: e, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: <span style="color: #, // 默认为1，显示进度提示
success: function (res) {
mediaId = res.serverId;
wxdownloadImage(mediaId)
$($hiddenImg[num]).val(mediaId);
fail: function (error) {
picPath = '';
localIds = '';
alert(Json.stringify(error));
此时的图片上传，是将图片上传到微信服务器，我们可以根据获取到的medisId 将图片下载到本地服务器。
5、获取本地图片接口，在本地显示
function wxgetLocalImgData(e,num){
var $myimg = $(".myimg");
if(window.__wxjs_is_wkwebview){
&wx.getLocalImgData({
&localId: e, // 图片的localID
&success: function (res) {
&&var localData = res.localD // localData是图片的base64数据，可以用img标签显示
&&localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
$($myimg[num]).attr("src", localData);
&},fail:function(res){
&&alert("显示失败");
$($myimg[num]).attr("src", e);
此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题
6、提交到本地服务器，实现本地上传
function tijiao(){
var userInfo = JSON.parse(localStorage.getItem("UserInfoKey"));
var user = JSON.parse(localStorage.getItem("user"));
var userId = user.userId;
var company = userInfo.mainI
var kfCompanyProvince = userInfo.kfCompanyP
var kfCompanyCity = userInfo.kfCompanyC
var kfCompanyDistrict = userInfo.kfCompanyD
var companyAddress = userInfo.detailA
var userType = user.userT
var userName = userInfo.
var principalPhoneCode = userInfo.
var img1 = $($(".hiddenImg")[<span style="color: #]).val();
var img3 = $($(".hiddenImg")[<span style="color: #]).val();
var img5 = $($(".hiddenImg")[<span style="color: #]).val();
var img6 = $($(".hiddenImg")[<span style="color: #]).val();
var img7 = $($(".hiddenImg")[<span style="color: #]).val();
url:'user_uploadInformation',
"userId":userId,
"company":company,
"kfCompanyProvince":kfCompanyProvince,
"kfCompanyCity":kfCompanyCity,
"kfCompanyDistrict":kfCompanyDistrict,
"companyAddress":companyAddress,
"userType":userType,
"userName":userName,
"principalPhoneCode":principalPhoneCode,
"img1":img1,
"img3":img3,
"img5":img5,
"img6":img6,
"img7":img7
type:'post',
dataType:'json',
async:false,
success:function(data){
if(data.code == <span style="color: #){
mui.alert("认证失败，请重新认证")
}else if(data.code == <span style="color: #){
mui.alert("申请提交成功，请稍后",function(){
window.location.href="../../index/carManLookImg.jsp"
error:function(data){
alert("上传失败")
根据以上的步骤，简单的调取摄像头和相册实现图片上传的功能就实现了，其实微信平台的开发者文档给我们提供了非常详细的开发者文档，以后可以一起多研究研究。最后附上微信开发者文档链接https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp
阅读(...) 评论()调用摄像头
获取相册图片
[问题点数：40分]
调用摄像头
获取相册图片
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
Hbuilder mui 相册拍照图片上传
导读：在做项目的过程中，需要从相册或是拍照，然后上传，比如修改用户头像或是上传项目图片。
在做项目的过程中，需要从相册或是拍照，然后上传，比如修改用户头像或是上传项目图片。
点击用户头像后，弹出actionSheet，选着从相册或是拍照；选着图片后就调用上传方法，上传图片；在上传之前先压缩了一下图片。
弹出actionSheet
&&&&&&&&document.getElementById(&#39;headImage&#39;).addEventListener(&#39;tap&#39;,&function()&{&
&&&&&&&&&&&&if&(mui.os.plus)&{&
&&&&&&&&&&&&&&&&var&a&=&[{&
&&&&&&&&&&&&&&&&&&&&title:&&拍照&&
&&&&&&&&&&&&&&&&},&{&
&&&&&&&&&&&&&&&&&&&&title:&&从手机相册选择&&
&&&&&&&&&&&&&&&&}];&
&&&&&&&&&&&&&&&&plus.nativeUI.actionSheet({&
&&&&&&&&&&&&&&&&&&&&title:&&修改用户头像&,&
&&&&&&&&&&&&&&&&&&&&cancel:&&取消&,&
&&&&&&&&&&&&&&&&&&&&buttons:&a&
&&&&&&&&&&&&&&&&},&function(b)&{&&
&&&&&&&&&&&&&&&&&&&&switch&(b.index)&{&
&&&&&&&&&&&&&&&&&&&&&&&&case&0:&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&break;&
&&&&&&&&&&&&&&&&&&&&&&&&case&1:&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&getImage();&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&break;&
&&&&&&&&&&&&&&&&&&&&&&&&case&2:&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&galleryImg();&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&break;&
&&&&&&&&&&&&&&&&&&&&&&&&default:&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&break;&
&&&&&&&&&&&&&&&&&&&&}&
&&&&&&&&&&&&&&&&})&
&&&&&&&&&&&&}&
&&&&&&&&},&false);&
&&&&&&&&function&getImage()&{&
&&&&&&&&&&&&var&c&=&plus.camera.getCamera();&
&&&&&&&&&&&&c.captureImage(function(e)&{&
&&&&&&&&&&&&&&&&plus.io.resolveLocalFileSystemURL(e,&function(entry)&{&
&&&&&&&&&&&&&&&&&&&&var&s&=&entry.toLocalURL()&+&&?version=&&+&new&Date().getTime();&
&&&&&&&&&&&&&&&&&&&&uploadHead(s);&&
&&&&&&&&&&&&&&&&},&function(e)&{&
&&&&&&&&&&&&&&&&&&&&console.log(&读取拍照文件错误：&&+&e.message);&
&&&&&&&&&&&&&&&&});&
&&&&&&&&&&&&},&function(s)&{&
&&&&&&&&&&&&&&&&console.log(&error&&+&s);&
&&&&&&&&&&&&},&{&
&&&&&&&&&&&&&&&&filename:&&_doc/head.png&&
&&&&&&&&&&&&})&
&&&&&&&&}&
从相册选图上传
&&&&&&&&function&galleryImg()&{&
&&&&&&&&&&&&plus.gallery.pick(function(a)&{&
&&&&&&&&&&&&&&&&plus.io.resolveLocalFileSystemURL(a,&function(entry)&{&
&&&&&&&&&&&&&&&&&&&&plus.io.resolveLocalFileSystemURL(&_doc/&,&function(root)&{&
&&&&&&&&&&&&&&&&&&&&&&&&root.getFile(&head.png&,&{},&function(file)&{&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&file.remove(function()&{&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&console.log(&file&remove&success&);&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&entry.copyTo(root,&&#39;head.png&#39;,&function(e)&{&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&e&=&e.fullPath&+&&?version=&&+&new&Date().getTime();&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&uploadHead(e);&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&function(e)&{&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&console.log(&#39;copy&image&fail:&#39;&+&e.message);&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&});&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&function()&{&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&console.log(&delete&image&fail:&&+&e.message);&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&});&
&&&&&&&&&&&&&&&&&&&&&&&&},&function()&{&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&entry.copyTo(root,&&#39;head.png&#39;,&function(e)&{&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&path&=&e.fullPath&+&&?version=&&+&new&Date().getTime();&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&uploadHead(path);&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&function(e)&{&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&console.log(&#39;copy&image&fail:&#39;&+&e.message);&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&});&
&&&&&&&&&&&&&&&&&&&&&&&&});&
&&&&&&&&&&&&&&&&&&&&},&function(e)&{&
&&&&&&&&&&&&&&&&&&&&&&&&console.log(&get&_www&folder&fail&);&
&&&&&&&&&&&&&&&&&&&&})&
&&&&&&&&&&&&&&&&},&function(e)&{&
&&&&&&&&&&&&&&&&&&&&console.log(&读取拍照文件错误：&&+&e.message);&
&&&&&&&&&&&&&&&&});&
&&&&&&&&&&&&},&function(a)&{},&{&
&&&&&&&&&&&&&&&&filter:&&image&&
&&&&&&&&&&&&})&
&&&&&&&&};&
图片上传和压缩
&&&&&&&&function&uploadHead(imgPath)&{&
&&&&&&&&&&&&console.log(&imgPath&=&&&+&imgPath);&
&&&&&&&&&&&&mainImage.src&=&imgP&
&&&&&&&&&&&&mainImage.style.width&=&&60px&;&
&&&&&&&&&&&&mainImage.style.height&=&&60px&;&
&&&&&&&&&&&&var&image&=&new&Image();&
&&&&&&&&&&&&image.src&=&imgP&
&&&&&&&&&&&&image.onload&=&function()&{&
&&&&&&&&&&&&&&&&var&imgData&=&getBase64Image(image);&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&}&
&&&&&&&&function&getBase64Image(img)&{&
&&&&&&&&&&&&var&canvas&=&document.createElement(&canvas&);&
&&&&&&&&&&&&var&width&=&img.&
&&&&&&&&&&&&var&height&=&img.&
&&&&&&&&&&&&&
&&&&&&&&&&&&if&(width&&&height)&{&
&&&&&&&&&&&&&&&&if&(width&&&100)&{&
&&&&&&&&&&&&&&&&&&&&height&=&Math.round(height&*=&100&/&width);&
&&&&&&&&&&&&&&&&&&&&width&=&100;&
&&&&&&&&&&&&&&&&}&
&&&&&&&&&&&&}&else&{&
&&&&&&&&&&&&&&&&if&(height&&&100)&{&
&&&&&&&&&&&&&&&&&&&&width&=&Math.round(width&*=&100&/&height);&
&&&&&&&&&&&&&&&&&&&&height&=&100;&
&&&&&&&&&&&&&&&&}&
&&&&&&&&&&&&}&
&&&&&&&&&&&&canvas.width&=&&&&&
&&&&&&&&&&&&canvas.height&=&&&
&&&&&&&&&&&&var&ctx&=&canvas.getContext(&2d&);&
&&&&&&&&&&&&ctx.drawImage(img,&0,&0,&width,&height);&&
&&&&&&&&&&&&var&dataURL&=&canvas.toDataURL(&image/png&,&0.8);&
&&&&&&&&&&&&return&dataURL.replace(&data:image/base64,&,&&&);&
&&&&&&&&}&&&&
在使用中，我们可以发现，使用流程是非常清晰的；某种程度来说比原生的使用还要简单一些。&
转载请注明（B5教程网）原文链接：
网友评论：h5制作的web app 怎么样启用手机摄像头进行拍照_百度知道
h5制作的web app 怎么样启用手机摄像头进行拍照
我有更好的答案
web app获取不到手机里面的底层功能，比如说打开摄像头、打开相册、获取咱们的地理位置信息、支付...都是做不到的，那如果想开发一款app 需要用到原生底能力的话，web app是满足不了的
【0元入学，两周免费试听】
主营：培训【Python+人工智能，Java大数据，HTML5】
为您推荐：
其他类似问题
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。没有更多推荐了，
不良信息举报
举报内容：
调用摄像头拍照和从相册中选择
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！}