校园春色亚洲色图_亚洲视频分类_中文字幕精品一区二区精品_麻豆一区区三区四区产品精品蜜桃

主頁 > 知識庫 > tp5實現(xiàn)微信小程序多圖片上傳到服務(wù)器功能

tp5實現(xiàn)微信小程序多圖片上傳到服務(wù)器功能

熱門標(biāo)簽:合肥外呼系統(tǒng)app 電銷機器人-快迭智能 沈陽人工智能電銷機器人公司 高識別電銷機器人 拉薩打電話機器人 哈爾濱400電話辦理到易號網(wǎng) 智能外呼電銷系統(tǒng) h5 地圖標(biāo)注 寶安400電話辦理

最近在做一個教育類的小商城的微信小程序,用到了上傳多個圖片文件到服務(wù)器端,這里做一個講解,希望對大家有所幫助。

1,小程序端:

在wxml文件中:

!--選擇圖片 -->
view class="picture">
view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
image class='imgSelected' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg">/image>
view class="delete-btn" data-index="{{index}}" catchtap="deleteImg">刪除/view>
/view>
view class="clickImg" bindtap="chooseImg">點擊上傳作業(yè)/view>
/view>
!-- 選擇圖片end -->

在js文件中:

Page({
/**
 * 頁面的初始數(shù)據(jù)
*/
data: {
 index: 0,
 multiIndex: [0, 0],
//傳到后臺的課程分類
cname:'',
 },
/**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
 },
/**
 * 
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
 },
/**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
 },
/**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
 },
/**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
 },
/**
 * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
 },
/**
 * 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
 },
/**
 * 用戶點擊右上角分享
*/
onShareAppMessage: function () {
 },
// 上傳圖片操作
// 上傳圖片
chooseImg: function (e) {
var that = this;
if(that.data.cname==''){
 }else{
var imgs = this.data.imgs;
if (imgs.length >= 9) {
this.setData({
 lenMore: 1
 });
 setTimeout(function () {
 that.setData({
 lenMore: 0
 });
 }, 2500);
return false;
 }
 wx.chooseImage({
// count: 1, // 默認(rèn)9
 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths;
var imgs = that.data.imgs;
// console.log(tempFilePaths + '----');
for (var i = 0; i  tempFilePaths.length; i++) {
if (imgs.length >= 9) {
 that.setData({
 imgs: imgs
 });
return false;
 } else {
 imgs.push(tempFilePaths[i]);
 }
 }
// console.log(imgs);
 that.setData({
 imgs: imgs,
 });
//循環(huán)把圖片上傳到服務(wù)器
for (var i = 0; i  imgs.length; i++) {
 wx.uploadFile({
 url: url + 'Wx_SaveHomeWork',
 filePath: imgs[i],
 name: 'files',
 formData: {
 cname: that.data.cname
 },
 success: function (res) {
 console.log(res)
 }
 })
 }
 }
 });
 }
 },
// 刪除圖片
deleteImg: function (e) {
var imgs = this.data.imgs;
var index = e.currentTarget.dataset.index;
 imgs.splice(index, 1);
this.setData({
 imgs: imgs
 });
 },
// 預(yù)覽圖片
previewImg: function (e) {
//獲取當(dāng)前圖片的下標(biāo)
var index = e.currentTarget.dataset.index;
//所有圖片
var imgs = this.data.imgs;
 wx.previewImage({
//當(dāng)前顯示圖片
current: imgs[index],
//所有圖片
urls: imgs
 })
 },
})

2,我們注意到我的wx.request請求中Wx_SaveHomeWork方法是后臺服務(wù)器的接收圖片方法,

后邊我會把這個方法展示出來,

3.tp5后臺controller中:

//存取學(xué)生作業(yè)信息
  public function Wx_SaveHomeWork(){
    $files=\request()->file('files');
    $cname=\request()->param('cname');
    $cid=Db::name('course')->where('cname',$cname)->value('id');
    $max_id=Db::name('homework')->max('id');
    foreach($files as $item){
// 移動到框架應(yīng)用根目錄/public/uploads/ 目錄下
      $info = $files->rule('date')->move(ROOT_PATH . 'public' . DS . 'uploads');
      if($info){
        $saveName=str_replace("\\","/",$info->getSaveName());
        $img='/uploads/'.$saveName;
        $homework[]=['id'=>$max_id+1,'img'=>$img,'cid'=>$cid];
      }
    }
    //把數(shù)據(jù)插入到作業(yè)表中
    \db('homework')->insertAll($homework);
  }

這里說一下,max_id的作用,因為接受的是多張圖片,相當(dāng)于一次性要存儲多條數(shù)據(jù),所以用max_id對id進行自增,存儲到數(shù)據(jù)庫表,cid是我自己數(shù)據(jù)庫邏輯需要用到的變量,可以不用考慮,

4.講解的不夠清楚,因為是自己寫的,感受不到難點在哪里,我自己的難點是在小程序端的圖片上傳,用了for循環(huán),循環(huán)上傳的方法,其他的相對來說,邏輯比較簡單。

總結(jié)

以上所述是小編給大家介紹的tp5實現(xiàn)微信小程序多圖片上傳到服務(wù)器功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

您可能感興趣的文章:
  • TP5框架實現(xiàn)上傳多張圖片的方法分析
  • tp5框架基于ajax實現(xiàn)異步刪除圖片的方法示例
  • 基于ThinkPHP5.0實現(xiàn)圖片上傳插件
  • ThinkPHP5+Layui實現(xiàn)圖片上傳加預(yù)覽功能
  • ThinkPHP5.0 圖片上傳生成縮略圖實例代碼說明
  • thinkPHP5框架整合plupload實現(xiàn)圖片批量上傳功能的方法
  • thinkphp5上傳圖片及生成縮略圖公共方法(分享)
  • thinkPHP5.0框架驗證碼調(diào)用及點擊圖片刷新簡單實現(xiàn)方法
  • Thinkphp5+plupload實現(xiàn)的圖片上傳功能示例【支持實時預(yù)覽】
  • Thinkphp5框架實現(xiàn)圖片、音頻和視頻文件的上傳功能詳解
  • ThinkPHP5+UEditor圖片上傳到阿里云對象存儲OSS功能示例
  • TP5框架實現(xiàn)一次選擇多張圖片并預(yù)覽的方法示例

標(biāo)簽:成都 山東 泰州 梅州 張家口 巴中 林芝 威海

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《tp5實現(xiàn)微信小程序多圖片上傳到服務(wù)器功能》,本文關(guān)鍵詞  tp5,實現(xiàn),微信,小,程序,多圖,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《tp5實現(xiàn)微信小程序多圖片上傳到服務(wù)器功能》相關(guān)的同類信息!
  • 本頁收集關(guān)于tp5實現(xiàn)微信小程序多圖片上傳到服務(wù)器功能的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    校园春色亚洲色图_亚洲视频分类_中文字幕精品一区二区精品_麻豆一区区三区四区产品精品蜜桃
    91色综合久久久久婷婷| 欧美精品一区二区三区蜜桃| 亚洲午夜在线电影| 欧美精品一区二区在线播放 | 99国产精品国产精品毛片| 亚洲国产毛片aaaaa无费看| 国产精品福利影院| **欧美大码日韩| 亚洲人快播电影网| 亚洲自拍偷拍图区| 日韩不卡一二三区| 久久99热这里只有精品| 亚洲午夜一二三区视频| 亚洲欧美一区二区三区久本道91| 亚洲欧洲成人自拍| 亚洲国产综合人成综合网站| 亚洲成人在线观看视频| 五月婷婷综合网| 视频一区中文字幕| 亚洲欧洲日韩女同| 精品国产乱码久久久久久老虎| 91精品在线麻豆| 久久综合色鬼综合色| 欧美日韩国产中文| 欧美日韩亚洲丝袜制服| 欧美天堂亚洲电影院在线播放| 欧美精品vⅰdeose4hd| 26uuu国产一区二区三区| 国产精品传媒视频| 欧美aⅴ一区二区三区视频| 国产美女精品在线| 中文字幕一区二区在线观看| 国产在线一区观看| 久久久综合激的五月天| 日韩美女久久久| 午夜精品免费在线| 日韩黄色在线观看| 亚洲一二三四区不卡| 国产一区二区三区黄视频 | 天天操天天色综合| 欧美中文字幕亚洲一区二区va在线 | 精品国精品自拍自在线| 国产亚洲一区二区三区| 国产女同性恋一区二区| 亚洲人精品午夜| 久久99国产乱子伦精品免费| 一本色道久久综合亚洲aⅴ蜜桃| 日韩欧美国产1| 一区二区激情视频| 高清在线不卡av| 亚洲午夜精品网| 欧美一区二区精品| 成人欧美一区二区三区视频网页| 亚洲在线观看免费| 成人美女视频在线看| 欧美日韩亚洲不卡| 久久亚洲欧美国产精品乐播| |精品福利一区二区三区| 久久精品国产免费看久久精品| 91黄色激情网站| 国产精品国产成人国产三级| 国产一区二区三区av电影| 91精品国产色综合久久不卡蜜臀| 国产69精品久久久久毛片| 精品少妇一区二区三区在线视频| 99在线精品视频| 国产精品高潮久久久久无| 国产一区二区美女| 欧美电影精品一区二区| 一区二区三区在线影院| 91视频www| 樱花草国产18久久久久| 欧美精品久久久久久久久老牛影院| 久久精品欧美一区二区三区不卡 | 国产精品一级在线| 欧美第一区第二区| 狠狠色综合色综合网络| 精品国产制服丝袜高跟| 免费在线看成人av| 欧美电影精品一区二区| 狠狠狠色丁香婷婷综合激情| 精品少妇一区二区三区免费观看 | 精品福利在线导航| 精品国产免费视频| 久久久五月婷婷| 国产999精品久久久久久绿帽| aaa国产一区| 99国产精品国产精品久久| 亚洲色图19p| 欧洲一区二区三区在线| 天天综合色天天| 精品少妇一区二区三区日产乱码| 韩国三级中文字幕hd久久精品| 欧美精品一区二区在线观看| 成人一级视频在线观看| 亚洲一区二区四区蜜桃| 337p亚洲精品色噜噜狠狠| 国产自产v一区二区三区c| 中文字幕一区三区| 欧美一区二区播放| 成人综合在线网站| 亚洲成a人v欧美综合天堂| 欧美电影免费观看高清完整版在 | 丁香另类激情小说| 亚洲国产精品久久人人爱| 日韩一二三区视频| 粉嫩久久99精品久久久久久夜| 一区二区三区欧美在线观看| 日韩欧美第一区| 成人精品视频网站| 五月天激情小说综合| 久久人人97超碰com| 91黄色免费观看| 国产精品综合二区| 亚洲国产日韩一级| 国产女同互慰高潮91漫画| 欧美一区在线视频| 色综合视频在线观看| 精品一区二区三区香蕉蜜桃| 亚洲视频在线一区| 久久综合精品国产一区二区三区 | 亚洲国产成人av| 欧美激情中文不卡| 在线91免费看| 色噜噜久久综合| 国产精品资源在线看| 午夜精品福利一区二区三区蜜桃| 国产精品欧美一级免费| 91精品国产综合久久久久| 一本一道久久a久久精品综合蜜臀| 精品一区二区在线观看| 午夜视频一区在线观看| 久久新电视剧免费观看| 欧美区视频在线观看| 色综合视频在线观看| 国产高清亚洲一区| 久久精品国产亚洲5555| 男男视频亚洲欧美| 日本aⅴ免费视频一区二区三区 | 日韩欧美成人激情| 欧美美女直播网站| 欧美三级午夜理伦三级中视频| 不卡区在线中文字幕| 另类专区欧美蜜桃臀第一页| 天堂va蜜桃一区二区三区 | 在线综合视频播放| 欧美最猛性xxxxx直播| 91亚洲永久精品| av亚洲精华国产精华| 成人av在线资源网站| 国产成人亚洲综合a∨婷婷图片| 蜜桃91丨九色丨蝌蚪91桃色| 日一区二区三区| 日本在线不卡一区| 青青草97国产精品免费观看 | 精品国产乱码久久久久久夜甘婷婷| 91精品国产综合久久久蜜臀图片| 欧美日韩国产精选| 日韩一卡二卡三卡四卡| 欧美大肚乱孕交hd孕妇| 精品久久国产97色综合| 久久久久久久国产精品影院| 久久夜色精品国产欧美乱极品| 精品乱人伦一区二区三区| 久久久久国产精品免费免费搜索| 国产午夜精品一区二区三区嫩草 | 99久久国产综合精品麻豆| 99久久精品费精品国产一区二区| av电影一区二区| 欧美日韩一区不卡| 日韩精品一区二区三区在线| 久久久久久久网| 国产精品理论在线观看| 亚洲电影中文字幕在线观看| 日韩在线一区二区三区| 久久99在线观看| 成人性生交大合| av不卡在线播放| 欧美人狂配大交3d怪物一区| 久久蜜臀中文字幕| 精品国偷自产国产一区| 国产高清成人在线| 成人午夜视频网站| 在线视频国产一区| 精品国产人成亚洲区| 欧美激情一区二区三区全黄| 亚洲高清视频在线| 国产米奇在线777精品观看| 色av一区二区| 久久色在线观看| 亚洲.国产.中文慕字在线| 日本va欧美va欧美va精品| 国产精品一区2区| 极品少妇一区二区| 久久老女人爱爱| 国产欧美日韩麻豆91| 日韩高清不卡在线| 精品黑人一区二区三区久久| 青青草原综合久久大伊人精品优势| 亚洲欧美日韩成人高清在线一区|