微信小程序圖片選擇、上傳到服務器、預覽(PHP)實現(xiàn)實例
更新時間:2017年05月11日 14:43:30 作者:Y-J-Le
這篇文章主要介紹了微信小程序圖片選擇、上傳到服務器、預覽(PHP)實現(xiàn)實例的相關資料,需要的朋友可以參考下
微信小程序圖片選擇、上傳到服務器、預覽(PHP)實現(xiàn)實例
小程序實現(xiàn)選擇圖片、預覽圖片、上傳到開發(fā)者服務器上
后臺使用的tp3.2 圖片上傳
請求時候的header參考時可以去掉(個人后臺驗證權限使用)
小程序前端代碼:
<view class="section">
<form bindsubmit="bindFormSubmit">
<textarea placeholder="請輸入問題內(nèi)容" name="content"/>
<view class="">
選擇提問圖片: <label bindtap="checkimg">點擊選擇圖片</label>
</view>
<view class="">
<image wx:for="{{imglist}}" mode="aspectFit" bindtap="ylimg" data-src="{{item}}" style="width:75px;height:75px;" src="{{item}}"></image>
</view>
<button form-type="submit"> 提交 </button>
</form>
</view>
小程序js代碼:
data: {
imglist:[]
},
/**
* form提交事件
*/
bindFormSubmit:function(e){
self=this
//圖片
var imglist = self.data.imglist
//提問內(nèi)容
var content=e.detail.value.content;
if(content==''){
wx.showToast({
title: '內(nèi)容不能為空',
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后臺代碼
//圖片上傳
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{// 上傳成功 獲取上傳文件信息
//插入到數(shù)據(jù)庫中
}
}
}
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關文章
利用前端HTML+CSS+JS開發(fā)簡單的TODOLIST功能(記事本)
這篇文章主要介紹了用HTML+CSS+JS做出簡單的TODOLIST(記事本)項目,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2021-04-04

