婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > tp5實現微信小程序多圖片上傳到服務器功能

tp5實現微信小程序多圖片上傳到服務器功能

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

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

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">點擊上傳作業/view>
/view>
!-- 選擇圖片end -->

在js文件中:

Page({
/**
 * 頁面的初始數據
*/
data: {
 index: 0,
 multiIndex: [0, 0],
//傳到后臺的課程分類
cname:'',
 },
/**
 * 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
 },
/**
 * 
 * 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
 },
/**
 * 生命周期函數--監聽頁面顯示
*/
onShow: function () {
 },
/**
 * 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
 },
/**
 * 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
 },
/**
 * 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
 },
/**
 * 頁面上拉觸底事件的處理函數
*/
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, // 默認9
 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的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,
 });
//循環把圖片上傳到服務器
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
 });
 },
// 預覽圖片
previewImg: function (e) {
//獲取當前圖片的下標
var index = e.currentTarget.dataset.index;
//所有圖片
var imgs = this.data.imgs;
 wx.previewImage({
//當前顯示圖片
current: imgs[index],
//所有圖片
urls: imgs
 })
 },
})

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

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

3.tp5后臺controller中:

//存取學生作業信息
  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){
// 移動到框架應用根目錄/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];
      }
    }
    //把數據插入到作業表中
    \db('homework')->insertAll($homework);
  }

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

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

總結

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

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

標簽:成都 山東 泰州 梅州 張家口 巴中 林芝 威海

巨人網絡通訊聲明:本文標題《tp5實現微信小程序多圖片上傳到服務器功能》,本文關鍵詞  tp5,實現,微信,小,程序,多圖,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《tp5實現微信小程序多圖片上傳到服務器功能》相關的同類信息!
  • 本頁收集關于tp5實現微信小程序多圖片上傳到服務器功能的相關信息資訊供網民參考!
  • 推薦文章
    婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av
    韩国成人福利片在线播放| 国产精品美女久久久久aⅴ| 99riav一区二区三区| 狠狠色狠狠色合久久伊人| 久久精品国产99| 国产乱码字幕精品高清av| 日韩中文字幕区一区有砖一区| 亚洲精品国产精品乱码不99 | 在线观看免费视频综合| 91亚洲精品久久久蜜桃| 99久久精品国产麻豆演员表| 不卡一区二区三区四区| 99re6这里只有精品视频在线观看| 成人久久视频在线观看| 91丨porny丨在线| 欧美日韩一区视频| 日韩免费福利电影在线观看| 精品国产在天天线2019| 国产视频911| 一区二区三区国产精华| 亚洲小少妇裸体bbw| 天天做天天摸天天爽国产一区| 日本不卡一二三区黄网| 国产成人在线免费| 欧美在线不卡视频| 欧美不卡视频一区| 国产精品伦一区二区三级视频| 一区二区在线看| 久久99精品国产.久久久久久| 国产精品99久久久久久似苏梦涵| 91社区在线播放| 欧美tk—视频vk| 中文字幕日本不卡| 久久er精品视频| 91首页免费视频| 日韩一区二区三区精品视频| 亚洲国产精品成人综合色在线婷婷| 一级特黄大欧美久久久| 国产一区视频导航| 欧美性感一区二区三区| 国产视频不卡一区| 日本不卡123| 99re热视频这里只精品| 日韩女优制服丝袜电影| 亚洲精品欧美综合四区| 精品一区二区av| 欧美日韩你懂得| 国产精品久久久久久久久晋中 | 精品写真视频在线观看| 欧美综合色免费| 国产日韩欧美高清| 久久精品99国产精品日本| 99久久伊人精品| 久久久影视传媒| 乱中年女人伦av一区二区| 色欧美乱欧美15图片| 国产午夜一区二区三区| 日韩激情中文字幕| 91福利在线观看| 亚洲欧美色一区| 丰满少妇在线播放bd日韩电影| 日韩一区二区三区视频在线| 亚洲高清免费观看| 91性感美女视频| 国产精品久久久一区麻豆最新章节| 国内精品免费在线观看| 精品精品欲导航| 久久成人羞羞网站| 精品剧情在线观看| 精品亚洲成av人在线观看| 91精品国产免费久久综合| 午夜一区二区三区视频| 欧美日韩亚洲另类| 丝袜国产日韩另类美女| 欧美日韩电影在线播放| 日韩在线a电影| 日韩精品综合一本久道在线视频| 亚洲电影中文字幕在线观看| 欧美日韩亚洲综合一区二区三区| 一区二区三区四区国产精品| 色综合中文字幕| 亚洲福利视频一区二区| 欧美日韩国产一二三| 久久99最新地址| 国产精品理论在线观看| 91一区二区在线| 亚洲综合色噜噜狠狠| 欧美日韩色综合| 久久精品免费看| 中文字幕欧美日韩一区| 成人免费毛片aaaaa**| 亚洲综合一区二区| 91精品久久久久久久91蜜桃| 久久超碰97中文字幕| 亚洲国产成人一区二区三区| 色综合天天性综合| 天堂影院一区二区| 欧美国产日本韩| 日本电影亚洲天堂一区| 欧美a级一区二区| 日本一区二区不卡视频| 欧洲精品视频在线观看| 狠狠色狠狠色综合系列| 亚洲激情中文1区| 久久免费视频一区| 91蝌蚪porny九色| 久久精品国产精品亚洲红杏| 久久久高清一区二区三区| 91色.com| 国产成人免费av在线| 亚洲国产日韩a在线播放性色| 日韩免费电影网站| 日本久久电影网| 国产综合色在线| 亚洲国产成人91porn| 久久精品一区二区三区不卡| 欧美性淫爽ww久久久久无| 国v精品久久久网| 精品一区二区三区免费观看| 一个色综合网站| 国产精品毛片久久久久久久| 日韩视频免费观看高清完整版在线观看 | 欧美v日韩v国产v| 欧美私人免费视频| 国产乱码精品一区二区三 | 中文字幕在线观看不卡视频| 欧美一区二区三区视频| 日本高清成人免费播放| 成人免费视频播放| 国产一区二区三区香蕉 | 国产精品福利影院| 国产日韩一级二级三级| 日韩一二三四区| 7777精品伊人久久久大香线蕉经典版下载 | 欧美视频中文字幕| 99久久精品免费| 国产精品一区二区视频| 日本午夜精品视频在线观看 | 日韩一本二本av| 在线91免费看| 在线成人免费视频| 欧美老肥妇做.爰bbww| 欧美日韩视频在线第一区| 欧美日韩在线不卡| 欧美三级视频在线| 欧美三级电影网| 欧美日韩国产免费一区二区| 91久久精品网| 欧美人妇做爰xxxⅹ性高电影| 欧美在线影院一区二区| 欧美日韩一区二区三区在线看| 在线区一区二视频| 正在播放一区二区| 精品日韩成人av| 欧美国产97人人爽人人喊| 精品福利一区二区三区免费视频| 欧美变态tickling挠脚心| 久久亚洲春色中文字幕久久久| 久久午夜色播影院免费高清| 国产日韩精品一区二区浪潮av | 91麻豆精品国产91久久久使用方法| 欧美日韩精品福利| 日韩美一区二区三区| 久久先锋影音av鲁色资源| 国产精品久久久久久久久久免费看| 国产精品美女久久久久久 | 久久久噜噜噜久噜久久综合| 中文字幕二三区不卡| 亚洲素人一区二区| 亚洲永久精品大片| 麻豆国产欧美一区二区三区| 国产在线精品一区二区不卡了| 成人综合在线网站| 欧美日韩中文一区| 26uuu精品一区二区| 国产精品国产三级国产aⅴ入口 | 亚洲国产视频网站| 国内偷窥港台综合视频在线播放| 成人97人人超碰人人99| 在线观看国产一区二区| 精品久久久久久久久久久久久久久| 国产亚洲女人久久久久毛片| 亚洲欧美日韩久久| 麻豆精品在线视频| 不卡高清视频专区| 777午夜精品视频在线播放| 中文字幕乱码亚洲精品一区| 一个色在线综合| 成人午夜免费电影| 欧美一区二区三区在| 日韩美女视频一区二区| 久久99国产精品久久| 91国偷自产一区二区使用方法| 精品福利av导航| 亚洲国产综合人成综合网站| 国产精品996| 精品日韩成人av| 婷婷一区二区三区| 91麻豆成人久久精品二区三区| 精品国产成人系列|