1. 程式人生 > 實用技巧 >續—Django+小程式實現圖片下載功能

續—Django+小程式實現圖片下載功能

在已經完成圖片上傳功能的基礎上再完成圖片下載功能,那具體怎麼實現呢?那就看以下操作吧

第一步:在backup資料夾下的backup.js檔案中,專門一個函式,處理圖片下載功能,那具體的操作如下:

// 下載圖片
  downloadFile: function (imgItem) {
    var that = this
    wx.downloadFile({
      url: imageUrl + '?md5=' + 'c272fb65f82896887eaf7d99bf90856d', //指定地址,獲取全域性變數中的imageUrl,在imageUrl的後面拼接圖片名稱
      success : function
(res){ //臨時路徑 var tmpPath = res.tempFilePath var newDownloadedBackupedfiles = that.data.downloadedBackupedFiles //把臨時路徑新增進去 newDownloadedBackupedfiles.push(tmpPath) that.setData({ downloadedBackupedFiles: newDownloadedBackupedfiles }) } }) }
關於圖片下載功能的程式碼

第二步:執行程式,看圖片是否下載,效果如下:

注:只要下載了圖片,圖片會在小程式中進行顯示。還是需要注意一下Django必須執行起來,才可以進行相關的操作

接下來點選下載圖片按鈕,看會不會在小程式中顯示(如果顯示,說明執行成功),如下:

關於backup.js整體程式碼:

const app = getApp()
const imageUrl = app.globalData.serverUrl + app.globalData.apiVersion //這裡可以理解為路徑拼接

Page({
  data: {
    // 需要上傳的圖片
    needUploadFiles: [],
    
// 已下載的備份圖片 downloadedBackupedFiles: [], }, // 選擇圖片上傳 chooseImage: function(e) { var that = this; wx.chooseImage({ sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有 success: function(res) { // 返回選定照片的本地檔案路徑列表,tempFilePath可以作為img標籤的src屬性顯示圖片 that.setData({ needUploadFiles: that.data.needUploadFiles.concat(res.tempFilePaths) }); } }) }, // 上傳圖片檔案 uploadFiles: function() { for(var i=0;i<this.data.needUploadFiles.length;i++){ var filePath= this.data.needUploadFiles[i] wx.uploadFile({ filePath: filePath, name: 'test', url: imageUrl, success: function(res){ //列印結果 console.log(res) } }) } }, // 下載圖片 downloadFile: function (imgItem) { var that = this wx.downloadFile({ url: imageUrl + '?md5=' + 'c272fb65f82896887eaf7d99bf90856d', //指定地址,獲取全域性變數中的imageUrl,在imageUrl的後面拼接圖片名稱 success : function(res){ //臨時路徑 var tmpPath = res.tempFilePath var newDownloadedBackupedfiles = that.data.downloadedBackupedFiles //把臨時路徑新增進去 newDownloadedBackupedfiles.push(tmpPath) that.setData({ downloadedBackupedFiles: newDownloadedBackupedfiles }) } }) } });
backup.js