微信小程序?qū)崿F(xiàn)圖片上傳功能實例(前端+PHP后端)
前言
幾乎每個程序都需要用到圖片。下面就來給大家介紹前端+PHP后端實現(xiàn)微信小程序?qū)崿F(xiàn)圖片上傳功能,分享出來供大家參考學(xué)習(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({ //從本地相冊選擇圖片或使用相機拍照
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);
}
}
}
運行結(jié)果:

console打印結(jié)果:

此時表示上傳成功!
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
JavaScript+Html5實現(xiàn)按鈕復(fù)制文字到剪切板功能(手機網(wǎng)頁兼容)
在學(xué)習(xí)javascript的過程中,遇到一個問題就是基于JavaScript+Html5實現(xiàn)按鈕復(fù)制文字到剪切板功能,下面小編給大家分享下我的實現(xiàn)思路,感興趣的朋友可以參考下2017-03-03
JavaScript設(shè)計模式之構(gòu)造器模式(生成器模式)定義與用法實例分析
這篇文章主要介紹了JavaScript設(shè)計模式之構(gòu)造器模式(生成器模式)定義與用法,結(jié)合實例形式分析了javascript構(gòu)造器模式的概念、原理、與工廠模式的區(qū)別以及相關(guān)使用方法,需要的朋友可以參考下2018-07-07
JavaScript插入動態(tài)樣式實現(xiàn)代碼
能夠把CSS樣式包含到HTML頁面中的元素有兩個。其中,<link>元素用于包含來自外部的文件,而<style>元素用于指定嵌入的樣式2012-02-02

