微信小程序教程之本地圖片上傳(leancloud)實例詳解

更新時間：2016年11月16日 10:23:46 作者：dzp_coder

這篇文章主要介紹了微信小程序教程之本地圖片上傳(leancloud)實例詳解的相關(guān)資料,這里舉例說明該如何實現(xiàn)和實例代碼，文章一一表述，需要的朋友可以參考下

微信小程序 leancloud ——本地圖片上傳

由于本站最近學習微信小程序的知識，這里記錄下微信小程序?qū)崿F(xiàn)本地上傳的功能實現(xiàn)方法，以下是網(wǎng)上找的資料，大家看下。

將本地圖片上傳至leancloud后臺.

獲取本地圖片或者拍照,我在上一篇博文中寫過.這里就不說了.我的博客

直接上代碼:

1.index.js

//index.js 
//獲取應用實例 
var app = getApp() 
const AV = require('../../utils/av-weapp.js'); 
Page({ 
 data: { 
 tempFilePaths: '' 
 }, 
 onLoad: function () { 
 AV.init({ 
  appId: 'EJx0NSfY*********-gzGzoHsz', 
  appKey: 'FBVPg5G*******T97SNQj', 
 }); 
 }, 
 chooseimage: function () { 
 var _this = this; 
 wx.chooseImage({ 
  count: 9, // 默認9 
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有 
  sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有 
  success: function (res) { 
  // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片 
  _this.setData({ 
   tempFilePaths: res.tempFilePaths 
  }) 
  var tempFilePath = res.tempFilePaths[0]; 
  new AV.File('file-name', { 
   blob: { 
   uri: tempFilePath, 
   }, 
  }).save().then( 
   file => console.log(file.url()) 
   ).catch(console.error); 
  } 
 }) 
 } 
})

通過file.url()可以拿到圖片的url,下面是我上傳后其中一張圖片的url

http://ac-ejx0nsfy.clouddn.com/6a0b4c301fed32d0e2a8

如果有同學用到leancloud,可以參照.其他可以看看文檔.

微信小程序上傳本地圖片文件

2.index.wxml

<!--index.wxml--> 
<button style="margin:30rpx;" bindtap="chooseimage">獲取圖片</button> 
<image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: