微信小程序上传图片很简单:
//点击选择图片
chooseimage:函数(){
var=这个;
wx.chooseImage ({//数:9日默认9
sizeType:“原始”、“压缩”,//可以指定是原图还是压缩图,默认二者都有
sourceType:“专辑”,“相机”,//可以指定来源是相册还是相机,默认二者都有
成功:函数(res) {
that.setData ({
tempFilePaths: that.data.tempFilePaths.concat (res.tempFilePaths)//在已有的基础上进行拼接
})
}
})
},
这里的setData里面是当你选择照片之后,再一次出发函数时候,会在原有的基础上增加照片,而不是覆盖掉,有兴趣可以看一下concat的含义
这里就选择了照片,可以显示在界面上
& lt;图像类="形象" background-size=鞍碧炱?为=" {{tempFilePaths}} " src=" https://www.yisu.com/zixun/{{项}}’
数据id=皗{指数}}”bindtap='删除'祝辞& lt;/image>
效果图:
上传:函数(){
(var=0;我& lt;this.data.tempFilePaths.length;我+ +){//console.log (“000”)
this.upload_file (this.data.tempFilePaths[我])
}
}，
upload_file:函数(filepath) {
var=这个;
wx.uploadFile ({
url: https://* * * * * * * * * * * * * * * * * * * * * * */一个',
标题:{
“内容类型”:“多部分/格式”
}，
filePath: filePath,
名称:“文件”,
formData: {
文件:filepath
}，
成功:函数(res) {
that.setData ({
mes: JSON.parse (res.data),
图片:that.data.images.concat (JSON.parse (res.data) .data.filePath)//把字符串解析成对象
})//console.log (that.data.mes.data.filePath)//console.log (that.data.images。长度+”* * * * * * * * * *”)//wx.showToast ({//标题:“成功”,//})
}，
失败:函数(res) {
wx.showToast ({
标题:“图片加载失败”,
})
}
})
}
其实到这里都没有太大的问题。
但是当我点击提交的时候,就会出现图片为空的问题,这是因为,我们在提交的事件中肯定是先写上传图片的方法,
让后是提交的方法,但是由于微信小程序是异步,在为循环没有执行完就触发了提交的事件,这造成图片为空的问题。
我搜了很多答案出来,但是由于是接触不久,完全没看懂,什么Promis之类的,只能自己想办法,就在选择图片的时候就把图片上传了,然后返回路径:
//点击选择图片
chooseimage:函数(){
var=这个;
wx.chooseImage ({//数:9日默认9
sizeType:“原始”、“压缩”,//可以指定是原图还是压缩图,默认二者都有
sourceType:“专辑”,“相机”,//可以指定来源是相册还是相机,默认二者都有
成功:函数(res) {
that.setData ({
tempFilePaths: that.data.tempFilePaths.concat (res.tempFilePaths)//在已有的基础上进行拼接
})
that.upload ();
that.setData ({
临时:that.data.tempFilePaths。//用长度来解决的循环比异步快
})
}
})
},
上传:函数(){
我对(var=this.data.temp;我& lt;this.data.tempFilePaths.length;我+ +){//console.log (“000”)
this.upload_file (this.data.tempFilePaths[我])
}
},
你会发现我加了一个临时工,这样就会解决问题,可以实现上传,但是删除的时候需要把上传的也删除掉,而不是单单的吧集合里面的删除掉。
源码:
//页面/评论/cmment.js
const应用=getApp ()
页面({/* *
*页面的初始数据
*/数据:{
mes: {},
内容:”,
tempFilePaths: [],
用户信息:{},
hasUserInfo:假的,
canIUse: wx.canIUse(“button.open-type.getUserInfo”),
图片:[],
温度:0,
infoId:”,
sendtype:“
}，/* *
* 生命周期函数--监听页面加载
*/onLoad:功能(选项){
console.log (options.infoId +“infoID”)
this.setData ({
infoId: options.infoId,
sendtype: options.sendtype
})
}，/* *
*页面上拉触底事件的处理函数
*/onReachBottom:函数(){
}，
confirmSubmit:函数(e) {
console.log (e.detail.value)
}，//点击选择图片
chooseimage:函数(){
var=这个;
wx.chooseImage ({//数:9日默认9
sizeType:“原始”、“压缩”,//可以指定是原图还是压缩图,默认二者都有
sourceType:“专辑”,“相机”,//可以指定来源是相册还是相机,默认二者都有
成功:函数(res) {
that.setData ({
tempFilePaths: that.data.tempFilePaths.concat (res.tempFilePaths)//在已有的基础上进行拼接
})
that.upload ();
that.setData ({
临时:that.data.tempFilePaths。//用长度来解决的循环比异步快
})
}
})
}，//点击删除图片
删除:函数(e) {
var指数=e.currentTarget.dataset.id;
this.data.tempFilePaths.splice(指数(1)//渲染数据
this.setData ({
tempFilePaths: this.data.tempFilePaths
})
}，//提交评论
formBindsubmit:函数(e) {//console.log (this.data.images。长度+“* * * * *”);//(var=0;我& lt;this.data.images.length;我+ +){//console.log (this.data.images[我]);//}
console.log (this.data.infoId +“infoID不能用?”)
wx.request ({
url: https://* * * * * * */saveComments ',
方法:“文章”,
标题:{
“内容类型”:“application/json”,
“用户令牌”:“OXJ * * * * *”,//usertoken
}，
数据:{
relevantId: this.data.infoId,
类型:1//this.data.type
内容:e.detail.value.content,
图片:this.data.images,
}，
成功:函数(res) {
如果(res.statusCode=200) {
wx.showModal ({
标题:“提示”,
内容:“评论成功”,
})
返回;
}
其他{
wx.showModal ({
标题:“提示”,
内容:“评论失败”,
})
}
}
})//wx.navigateTo ({//url:“. ./文章/文章# 63;id=" + this.data.infoId//})
}，
上传:函数(){
我对(var=this.data.temp;我& lt;this.data.tempFilePaths.length;我+ +){//console.log (“000”)
this.upload_file (this.data.tempFilePaths[我])
}
}，
upload_file:函数(filepath) {
var=这个;
wx.uploadFile ({
url: https://* * * * * * * */类/上传/一个”,
标题:{
“内容类型”:“多部分/格式”
}，
filePath: filePath,
名称:“文件”,
formData: {
文件:filepath
}，
成功:函数(res) {
that.setData ({
mes: JSON.parse (res.data),
图片:that.data.images.concat (JSON.parse (res.data) .data.filePath)//把字符串解析成对象
})//console.log (that.data.mes.data.filePath)//console.log (that.data.images。长度+”* * * * * * * * * *”)//wx.showToast ({//标题:“成功”,//})
}，
失败:函数(res) {
null
null
null
null
null
null
null
null
null
