Heim >Backend-Entwicklung >PHP-Tutorial >PHP implementiert die Bildauswahl, das Hochladen auf den Server und die Vorschau im WeChat-Applet
In diesem Artikel werden hauptsächlich relevante Informationen zur Bildauswahl des WeChat-Miniprogramms, zum Hochladen auf den Server und zu Implementierungsbeispielen für die Vorschau (PHP) vorgestellt. Freunde in Not können sich auf
Bildauswahl des WeChat-Miniprogramms beziehen. Implementierungsbeispiel für Hochladen auf Server, Vorschau (PHP)
Miniprogramm implementiert Bildauswahl, Vorschau und Hochladen auf Entwicklerserver
TP3.2-Bild-Upload im Hintergrund verwendet
Der Header-Verweis bei der Anfrage kann entfernt werden (wird für Berechtigungen zur Überprüfung des persönlichen Hintergrunds verwendet)
Miniprogramm-Frontend-Code:
<view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name="content"/> <view class=""> 选择提问图片: <label bindtap="checkimg">点击选择图片</label> </view> <view class=""> <image wx:for="{{imglist}}" mode="aspectFit" bindtap="ylimg" src="{{item}}" style="width:75px;height:75px;" src="{{item}}"></image> </view> <button form-type="submit"> 提交 </button> </form> </view>
Miniprogramm-JS-Code:
data: { imglist:[] }, /** * form提交事件 */ bindFormSubmit:function(e){ self=this //图片 var imglist = self.data.imglist //提问内容 var content=e.detail.value.content; if(content==''){ wx.showToast({ title: '内容不能为空', icon: 'loading', duration: 1000, mask:true }) } wx.showLoading({ title: '正在提交...', mask:true }) //添加问题 wx.request({ url: 'https://xxxxxxxxxx/index.PHP?g=user&m=center&a=createwt', data: { content:content }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: app.globalData.header, // 设置请求的 header success: function (res) { // success if(typeof(res.data)=='number'){ if (imglist != '') { //开始插入图片 for(var i=0;i<imglist.length;i++){ //上传至服务器 wx.uploadFile({ url: 'https://xxxxxxxx/index.php?g=user&m=center&a=upload', //仅为示例,非真实的接口地址 filePath: imglist[0], name: 'files', formData: { 'wtid': res.data }, header: app.globalData.header, success: function (res) { if(i>=imglist.length){ self.setData({ imglist:[] }) wx.hideLoading(); wx.showToast({ title: '提问成功', icon: 'success', duration: 2000, mask: true }) wx.navigateBack({ delta: 1 }) } } }) } console.log(imglist); }else{ wx.hideLoading(); wx.showToast({ title: '提问成功', icon: 'success', duration: 2000, mask: true }) wx.navigateBack({ delta: 1 }) } }else{ wx.hideLoading(); wx.showToast({ title: res.data, icon: 'loading', duration: 1000, mask: true }) } }, fail: function (res) { self.onLoad(); } }) }, //点击选择图片 checkimg:function(){ console.log('点击选择图片'); self=this wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths self.setData({ imglist:tempFilePaths }) } }) }, //点击预览图片 ylimg:function(e){ wx.previewImage({ current: e.target.dataset.src, urls: this.data.imglist // 需要预览的图片http链接列表 }) }
PHP-Hintergrundcode
/ /Bild hochladen
public function upload(){ if(IS_POST){ $upload = new \Think\Upload();// 实例化上传类 $upload->maxSize = 3145728 ;// 设置附件上传大小 $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 $upload->rootPath = './Uploads/'; // 设置附件上传根目录 $upload->savePath = ''; // 设置附件上传(子)目录 // 上传文件 $info = $upload->upload(); if(!$info) {// 上传错误提示错误信息 $this->error($upload->getError()); }else{// 上传成功 获取上传文件信息 //插入到数据库中 } } }
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist zur chinesischen PHP-Website!
Verwandte Empfehlungen:
So verwenden Sie PHP zum Exportieren von Daten in Taobao Assistant CSV
Das obige ist der detaillierte Inhalt vonPHP implementiert die Bildauswahl, das Hochladen auf den Server und die Vorschau im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!