上传文件 微信小程序input_微信小程序上传图片,微信小程序服务器请求和上传数据，上传图片并展示，提交表单完整实例代码附效果图...

微信小程序上传图片,微信小程序服务器请求和上传数据，上传图片并展示，提交表单完整实例代码附效果图

浏览量：2598

时间：2019-12-09

来源：qq_40536470

一：GET请求(最常用的)

wx.request({

url:'https://URL',//这里''里面填写你的服务器API接口的路径

data:{},//这里是可以填写服务器需要的参数

method:'GET',//声明GET请求

//header:{},//设置请求的header，GET请求可以不填

success:function(res){

console.log("返回成功的数据:"+res.data)//返回的会是对象，可以用JSON转字符串打印出来方便查看数据

console.log("返回成功的数据:"+JSON.stringify(res.data))//这样就可以愉快的看到后台的数据啦

},

fail:function(fail){

//这里是失败的回调，取值方法同上,把res改一下就行了

},

complete:function(arr){

//这里是请求以后返回的所以信息，请求方法同上，把res改一下就行了

}

})

二：POST请求(我主要用于上传数据的时候用)基本和GET比较类似，需要注意的两个地方请看注释。

varthat=this//创建一个名为that的变量来保存this当前的值

wx.request({

url:'',

method:'post',

data:{

openid:'openid'//这里是发送给服务器的参数(参数名：参数值)

},

header:{

'content-type':'application/x-www-form-urlencoded'//这里注意POST请求content-type是小写，大写会报错

},

success:function(res){

that.setData({//这里是修改data的值

test:res.data//test等于服务器返回来的数据

});

console.log(res.data)

}

});

三：表单提交(这种方式也比较常用，方法也比较多样)上代码,表单提交很简单。1.使用GET的方式提交表单：//index.wxml

formbindsubmit="formSubmit"bindreset="formReset"

inputtype="text"name="username"placeholder="请输入账号"/

inputtype="text"name="password"placeholder="请输入密码"/

buttonformType="submit"提交/button

/form

//index.js

formSubmit:function(e){

varthat=this;

varformData=e.detail.value;//获取表单所有input的值

wx.request({

url:'',

data:formData,

header:{'Content-Type':'application/json'},

success:function(res){

console.log(res.data)

}

})

},

//2.使用POST的方式提交表单，index.wxml的代码和上面的一样，这里就不重复贴代码了

formSubmit:function(e){

varadds=e.detail.value;

adds.openid=11;

wx.request({

url:'',

data:adds,

method:'POST',//OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT

header:{//设置请求的header

'content-type':'application/x-www-form-urlencoded'

},

success:function(res){

console.log(JSON.stringify(res.data))

}

fail:function(res){

console.log('cuowu'+':'+res)

}

})

},

//四：上传图片并且把图片展示出来

先贴上效果图：

//这里也很简单，直接上完整代码,

formbindsubmit="formSubmit"id='2'bindreset="formReset"

inputstyle='display:none'name='program_id'value='{{program_id}}'/input

viewclass='caigou_centent'描述说明(选填)/view

textareaclass='textarea'placeholder=""name="content"value='{{formdata}}'/

view

imagebindtap="upimg"src='../../images/jia.png'/image

blockwx:for="{{img_arr}}"

viewclass='logoinfo'

imagesrc='{{item}}'/image

/view

/block

/view

buttonclass='btn'formType="submit"发布/button

/form

js

varadds={};

Page({

data:{

img_arr:[],

formdata:'',

},

formSubmit:function(e){

varid=e.target.id

adds=e.detail.value;

adds.program_id=app.jtappid

adds.openid=app._openid

adds.zx_info_id=this.data.zx_info_id

this.upload()

},

upload:function(){

varthat=this

for(vari=0;ithis.data.img_arr.length;i++){

wx.uploadFile({

url:'https:/submit',

filePath:that.data.img_arr[i],

name:'content',

formData:adds,

success:function(res){

console.log(res)

if(res){

wx.showToast({

title:'已提交发布！',

duration:3000

});

}

}

})

}

this.setData({

formdata:''

})

},

upimg:function(){

varthat=this;

if(this.data.img_arr.length3){

wx.chooseImage({

sizeType:['original','compressed'],

success:function(res){

that.setData({

img_arr:that.data.img_arr.concat(res.tempFilePaths)

})

}

})

}else{

wx.showToast({

title:'最多上传三张图片',

icon:'loading',

duration:3000

});

}

},

//console出来如下图就证明上传成功了

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。