微信小程序圖片選擇、上傳到服務(wù)器、預(yù)覽(PHP)實(shí)現(xiàn)實(shí)例
微信小程序圖片選擇、上傳到服務(wù)器、預(yù)覽(PHP)實(shí)現(xiàn)實(shí)例
小程序?qū)崿F(xiàn)選擇圖片、預(yù)覽圖片、上傳到開(kāi)發(fā)者服務(wù)器上
后臺(tái)使用的tp3.2 圖片上傳
請(qǐng)求時(shí)候的header參考時(shí)可以去掉(個(gè)人后臺(tái)驗(yàn)證權(quán)限使用)
小程序前端代碼:
<view class="section">
<form bindsubmit="bindFormSubmit">
<textarea placeholder="請(qǐng)輸入問(wèn)題內(nèi)容" name="content"/>
<view class="">
選擇提問(wèn)圖片: <label bindtap="checkimg">點(diǎn)擊選擇圖片</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
//提問(wèn)內(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
})
//添加問(wèn)題
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, // 設(shè)置請(qǐng)求的 header
success: function (res) {
// success
if(typeof(res.data)=='number'){
if (imglist != '') {
//開(kāi)始插入圖片
for(var i=0;i<imglist.length;i++){
//上傳至服務(wù)器
wx.uploadFile({
url: 'https://xxxxxxxx/index.php?g=user&m=center&a=upload', //僅為示例,非真實(shí)的接口地址
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: '提問(wèn)成功',
icon: 'success',
duration: 2000,
mask: true
})
wx.navigateBack({
delta: 1
})
}
}
})
}
console.log(imglist);
}else{
wx.hideLoading();
wx.showToast({
title: '提問(wèn)成功',
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();
}
})
},
//點(diǎn)擊選擇圖片
checkimg:function(){
console.log('點(diǎn)擊選擇圖片');
self=this
wx.chooseImage({
count: 9, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths
self.setData({
imglist:tempFilePaths
})
}
})
},
//點(diǎn)擊預(yù)覽圖片
ylimg:function(e){
wx.previewImage({
current: e.target.dataset.src,
urls: this.data.imglist // 需要預(yù)覽的圖片http鏈接列表
})
}
php后臺(tái)代碼
//圖片上傳
public function upload(){
if(IS_POST){
$upload = new \Think\Upload();// 實(shí)例化上傳類(lèi)
$upload->maxSize = 3145728 ;// 設(shè)置附件上傳大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 設(shè)置附件上傳類(lèi)型
$upload->rootPath = './Uploads/'; // 設(shè)置附件上傳根目錄
$upload->savePath = ''; // 設(shè)置附件上傳(子)目錄
// 上傳文件
$info = $upload->upload();
if(!$info) {// 上傳錯(cuò)誤提示錯(cuò)誤信息
$this->error($upload->getError());
}else{// 上傳成功 獲取上傳文件信息
//插入到數(shù)據(jù)庫(kù)中
}
}
}
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
利用JavaScript寫(xiě)一個(gè)簡(jiǎn)單計(jì)算器
這篇文章主要介紹了?如何利用JavaScript寫(xiě)一個(gè)簡(jiǎn)單計(jì)算器,利用JavaScript寫(xiě)一個(gè)簡(jiǎn)單計(jì)算器算是一個(gè)簡(jiǎn)單的小練習(xí)吧,需要的小伙伴可以參考一下<BR>2021-11-11
JavaScript實(shí)現(xiàn)放大鏡詳細(xì)
這篇文章主要介紹了js實(shí)現(xiàn)放大鏡,借助寬高等比例放大的兩張圖片,結(jié)合js中鼠標(biāo)偏移量、元素偏移量、元素自身寬高等屬性完成;左側(cè)遮罩移動(dòng)Xpx,右側(cè)大圖移動(dòng)X*倍數(shù)px,具體內(nèi)容請(qǐng)需要的小伙伴出差下面文章內(nèi)容2021-12-12
利用前端HTML+CSS+JS開(kāi)發(fā)簡(jiǎn)單的TODOLIST功能(記事本)
這篇文章主要介紹了用HTML+CSS+JS做出簡(jiǎn)單的TODOLIST(記事本)項(xiàng)目,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-04-04
Skypack布局前端基建實(shí)現(xiàn)過(guò)程詳解
這篇文章主要為大家介紹了Skypack布局前端基建過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
前端自動(dòng)化測(cè)試之Jest?進(jìn)階教程示例
這篇文章主要為大家介紹了前端自動(dòng)化測(cè)試之Jest?進(jìn)階教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02

