微信小程序?qū)W習(xí)筆記之文件上傳、下載操作圖文詳解
本文實(shí)例講述了微信小程序?qū)W習(xí)筆記之文件上傳、下載操作。分享給大家供大家參考,具體如下:
前面介紹了微信小程序登錄API與獲取用戶信息操作。這里再來(lái)介紹一下文件的上傳與下載操作。
【文件上傳】wx.uploadFile
(以上傳圖片為例)
后臺(tái)上傳接口Upload.php:(tp5)
<?php namespace app\home\controller; use think\Controller; class Upload extends First { //上傳圖片API public function upImg() { $arr = array('state'=>0,'msg'=>'上傳失敗','filepath'=>''); $file = request()->file('file'); if($file){ $info = $file->move('upload/weixin/'); if ($info) { $arr['state'] = 1; $arr['msg'] = '上傳成功'; $arr['filepath'] = $info->getSaveName(); } } return json($arr); } }
前臺(tái)頁(yè)面upload.wxml:
<image src='{{imgpath}}' style='width:600rpx; height:600rpx' /> <view> <button bindtap="upImg">點(diǎn)擊選擇上傳圖</button> </view>
前臺(tái)upload.js:
Page({ data: { imgpath: '' }, upImg: function (e) { var that = this wx.chooseImage({ count: 1, // 默認(rèn)最多一次上傳9張圖片 sizeType: ['original', 'compressed'], // 允許原圖和壓縮圖 sourceType: ['album', 'camera'], // 允許相冊(cè)和相機(jī) success(res) { const tempFilePaths = res.tempFilePaths wx.showToast({ title: '正在上傳...', icon: 'loading', mask: true, duration: 500 }) wx.uploadFile({ url: 'https://www.msllws.top/Upload/upImg', //服務(wù)器上傳接口 filePath: tempFilePaths[0], //文件資源路徑 name: 'file', header: { 'Content-Type': 'Application/json' }, success(res) { console.log(res) if (res.statusCode == 200){ that.setData({ imgpath: tempFilePaths }) } } }) } }) } })
演示效果:
(其實(shí)是有正在上傳...效果的,手機(jī)錄屏沒(méi)給錄上。。)
查看服務(wù)器里面多了一張圖片:
嗯哼~
【文件下載】wx.downloadFile
(以下載一張圖片為例)
在服務(wù)器目錄下放一張圖片1.jpg:
download.wxml:
<image src='{{imgpath}}' style='width:600rpx; height:600rpx' /> <view> <button bindtap="download">點(diǎn)擊下載</button> </view>
download.js:
Page({ data: { imgpath: '' }, download: function (e) { var that = this wx.showToast({ title: '正在下載...', icon: 'loading', mask: true, duration: 500 }) wx.downloadFile({ url: 'https://www.msllws.top/upload/1.jpg', //下載地址 type: 'image', //下載的資源類型(imnage/audio/video) success: function (res) { console.log(res) if (res.statusCode == 200) { var filepath = res.tempFilePath that.setData({ imgpath: filepath }) } } }) } })
演示效果:
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
javascript json字符串到j(luò)son對(duì)象轉(zhuǎn)義問(wèn)題
今天小編就為大家分享一篇關(guān)于javascript json字符串到j(luò)son對(duì)象轉(zhuǎn)義問(wèn)題,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-01-01ES6學(xué)習(xí)教程之Map的常用方法總結(jié)
Map 是 ES6 中新增的一種數(shù)據(jù)結(jié)構(gòu),與 Set 一起添加,其實(shí)功能都差不多。下面這篇文章主要給大家總結(jié)介紹了關(guān)于ES6學(xué)習(xí)教程之Map的常用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-08-08JS中的oninput和onchange事件的區(qū)別及如何正確使用
在JavaScript中,oninput和onchange事件是用于處理用戶輸入的常見(jiàn)事件,本文將介紹oninput和onchange事件的區(qū)別,以及如何在實(shí)際開(kāi)發(fā)中正確使用它們,感興趣的朋友跟隨小編一起看看吧2023-10-10js創(chuàng)建一個(gè)input數(shù)組并綁定click事件的方法
這篇文章主要介紹了js創(chuàng)建一個(gè)input數(shù)組并綁定click事件的方法,需要的朋友可以參考下2014-06-06微信小程序開(kāi)發(fā)教程-手勢(shì)解鎖實(shí)例
手勢(shì)解鎖是app上常見(jiàn)的解鎖方式,相比輸入密碼方式操作起來(lái)要方便許多。這篇文章主要介紹了微信小程序開(kāi)發(fā)教程-手勢(shì)解鎖實(shí)例,有興趣的可以了解一下。2017-01-01用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02