小程序上传图片

小程序提供选择图片的接口 wx.chooseImage，既可以从相册中选择，也可以进行拍照，但是对于上传图片的接口wx.uploadFile，每次只能上传单个文件。所以在上传图片时单张和多张就有点区别。

1.上传单张图片

data:{
imgsrc:''
//将图片展示页面
},
addImg:function(){
let that=this;
let imgsrc=that.data.imgsrc;
wx.chooseImage({
count:1,
//最多可以选择的图片张数,默认9
success:function(res){
that.setData({
imgsrc:res.tempFilePaths[0]
})
//上传图片到服务器
wx.uploadFile({
url:'',
filepath:res.tempFilePaths[0],
name:'file',
formData:{
},
//其他需要的数据
success(resp){
console.log(resp)
}
})
}
})
}

2.上传多张图片（有些代码是我自己的操作，已经注释）

data:{
imgArr:[]
},
//添加图片
addImg:function(){
var that = this;
var imgArr = this.data.imgArr;
wx.chooseImage({
count: 9 - imgArr.length, //最多可以选择的图片张数,默认9
success: function(res) {
var imgsrc = res.tempFilePaths;
imgArr = imgArr.concat(imgsrc);
that.setData({
imgArr: imgArr
})
that.uploadimg();
}
})
},
//上传图片
uploadimg:function(){
var that=this,imgArr=this.data.imgArr;
this.uploading({
url:'',
path:imgArr,
//imgpic:[]
})
},
uploading:function(data){
var that=this,
i=data.i?data.i:0,
success=data.success?data.succcess:0,
fail=data.fail?data.fail:0;
var imgpic=data.imgpic;
wx.uploadFile({
url:data.url,
filePath:data.path[i],
name:'file',
formData:{},
success:(resp)=>{
success++;
//图片上传成功的变量+1
console.log(i);
//var s=JSON.parse(resp.data);
//imgpic.push(s.data.infopath);
//that.setData({
//
imgpic:imgpic
//})
//这里可能有BUG，失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时，这里的success才+1
},
fail:(res)=>{
fail++;
//上传失败
console.log('fail:' + i + "fail:" + fail)
},
complete: () => {
i++;
if (i == data.path.length) {
//图片上传完成，停止调用
console.log('执行完毕');
console.log('成功：' + success + " 失败：" + fail);
} else { //图片没有传完
data.i = i;
data.success = success;
data.fail = fail;
//data.imgpic = imgpic;
that.uploading(data)
}
}
})
}

最后

以上就是冷静棒球为你收集整理的小程序上传图片的全部内容，希望文章能够帮你解决小程序上传图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。