溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
幾乎每個程序都需要用到圖片。下面就來給大家介紹前端+PHP后端實現微信小程序實現圖片上傳功能，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。
方法如下：
一、wxml文件
<text>上傳圖片</text>
<view>
<button bindtap="uploadimg">點擊選擇上傳圖</button>
</view>
<image src='{{source}}' style='width:600rpx; height:600rpx' />
二、js文件
Page({
/**
* 頁面的初始數據
*/
data: { //初始化為空
source:''
},
/**
* 上傳圖片
*/
uploadimg:function(){
var that = this;
wx.chooseImage({ //從本地相冊選擇圖片或使用相機拍照
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success:function(res){
//console.log(res)
//前臺顯示
that.setData({
source: res.tempFilePaths
})
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的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);
}
}
}
運行結果：
console打印結果：
此時表示上傳成功！
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
