溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序?qū)崿F(xiàn)圖片上傳功能實例(前端+PHP后端)

發(fā)布時間:2020-10-19 22:27:14 來源:腳本之家 閱讀:277 作者:下頁、再停留 欄目:web開發(fā)

前言

幾乎每個程序都需要用到圖片。下面就來給大家介紹前端+PHP后端實現(xiàn)微信小程序?qū)崿F(xiàn)圖片上傳功能,分享出來供大家參考學(xué)習(xí),下面話不多說了,來一起看看詳細(xì)的介紹吧。

方法如下:

一、wxml文件

<text>上傳圖片</text>
<view>
<button bindtap="uploadimg">點擊選擇上傳圖</button>
</view>
<image src='{{source}}' style='width:600rpx; height:600rpx' />

二、js文件

Page({
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {  //初始化為空
 source:''
 },
/**
 * 上傳圖片
 */
 uploadimg:function(){
 var that = this;
 wx.chooseImage({ //從本地相冊選擇圖片或使用相機(jī)拍照
  count: 1, // 默認(rèn)9
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
  sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī),默認(rèn)二者都有
  success:function(res){
  //console.log(res)
  //前臺顯示
  that.setData({
   source: res.tempFilePaths
  })
  // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
  var tempFilePaths = res.tempFilePaths
   wx.uploadFile({
   url: 'http://www.website.com/home/api/uploadimg',
   filePath: tempFilePaths[0],
   name: 'file',
   
   success:function(res){
   //打印
   console.log(res.data)
   }
  })
  
  }
 })
 },)}

三、PHP后端代碼

// 上傳圖片
 public function uploadimg()
 {
   $file = request()->file('file');
  if ($file) {
   $info = $file->move('public/upload/weixin/');
   if ($info) {
    $file = $info->getSaveName();
    $res = ['errCode'=>0,'errMsg'=>'圖片上傳成功','file'=>$file];
    return json($res);
   }
  }  
 }

運行結(jié)果:

微信小程序?qū)崿F(xiàn)圖片上傳功能實例(前端+PHP后端)

console打印結(jié)果:

微信小程序?qū)崿F(xiàn)圖片上傳功能實例(前端+PHP后端)

此時表示上傳成功!

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI