欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序 tp5上传图片

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:736

高端HTML5响应式企业通用网

2020-05-06   浏览:517

html5响应式外贸网站英文版

2020-05-08   浏览:505

HTML5自适应律师工作室类网

2020-04-04   浏览:501

HTML5影视传媒文化公司类网

2020-05-12   浏览:495

微信小程序 tp5上传图片

发布时间:2020-11-02  

test.wxml页面

<view class="title">请选择要反馈的问题view> <view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view>{{array[index]}}view> <image src='../../image/ic_down.svg' class='picker_icon'>image> picker> view> <textarea placeholder="请输入您的意见或建议" name="textarea" bindinput="feedbackInput"/> <view class="title">图片添加view> <view class='uploadImg'> <view wx:for="{{image}}" wx:key='feedbackImg'> <image src='{{image[index]}}'>image> <button bindtap='delectImg' data-num='{{index}}'>删除button> view> <image src='../../image/ic_add_pic.svg' bindtap='uploadImg' class='addimg' style='display:{{img_button}}'>image> view> <button class="submit" type="{{button_status}}" bindtap="Submit"> 提交 button>

test.js页面

var app = getApp(); Page({ data: { array: ['程序错误', '软件改善', '业务建议'], index:0, msg:'', button_status: 'default', image:[], img_button:'inline-block', }, bindPickerChange: function (e) { this.setData({ index: e.detail.value }); }, Submit: function (e) { if(this.data.msg.length != 0){ var that=this; wx.showModal({ title: '提示', content: '是否确认提交?', success: function (res) { if (res.confirm) { wx.request({ url: app.appUrl.url + 'advise/uid/' + app.appData.userid + '/type/' + that.data.array[that.data.index] + '/content/' + that.data.msg,//+pic=图片地址1,图片地址2,图片地址3此处读取图片隐藏域的图片地址,多张用逗号分隔 header: { "Content-Type": "applciation/json" }, method: "POST", success: function (res) { }, fail: function (err) { }, complete: function (res) { wx.showToast({ title: '提交成功', image: '/image/right.png', duration: 3000 }) setTimeout(function () { wx.clearStorage() wx.navigateBack({ delta: 1 }) }, 2000); }, }) } }, }) } }, feedbackInput: function (event) { console.log(event.detail.value.length); if (event.detail.value.length==0){ this.setData({ button_status: 'default', }); } else{ this.setData({ button_status: 'primary', }); } this.setData({ msg: event.detail.value, }); }, uploadImg:function(){ var that = this, image = this.data.image; if(this.data.image.length<3){ wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { wx.uploadFile({ url: app.appUrl.url + 'upload',//这个方法就是后台处理上传的方法 filePath: res.tempFilePaths[0], //获取到上传的图片 name: 'file', success: function (info) { console.log(info);//info.data就是上传成功的图片名称 您可以在wxml里面搞一个隐藏域存储起来,在上面Submit提交里拼装一块提交出去 } }) }, complete: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 if (that.data.image.length==2){ that.setData({ img_button: 'none', }) } image.push(res.tempFilePaths); that.setData({ image: image, }) } }) } }, delectImg:function(e){ var image = this.data.image; image.splice(e.currentTarget.dataset.num,1); this.setData({ image: image, img_button: 'inline-block', }) }, })

thinkphp5接受处理

//图片上传 public function upload(){ $file = request()->file('file'); $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/images'); if($info){ echo $info->getSaveName(); die(); }else{ echo $file->getError(); die(); } }

微信小程序 tp5上传图片


微信小程序 tp5上传图片