婷婷综合国产,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實現微信小程序多圖片上傳到服務器功能的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 和静县| 万载县| 东方市| 石河子市| 洪湖市| 会昌县| 永胜县| 崇明县| 容城县| 岚皋县| 息烽县| 蒙山县| 鹰潭市| 偃师市| 鸡泽县| 烟台市| 淮安市| 福安市| 凌云县| 灵宝市| 大足县| 太原市| 鹤山市| 莎车县| 东兴市| 新田县| 全南县| 稻城县| 巫溪县| 依兰县| 武安市| 东方市| 金川县| 土默特左旗| 保亭| 永新县| 获嘉县| 贡山| 余江县| 大田县| 思南县|