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

續—Django+小程式實現刪除圖片功能

還是在圖片上傳功能的基礎上完成刪除圖片功能,跟下載圖片功能都差不多,具體操作如下

第一步:還是在backup.js中新增刪除圖片功能,具體如下:

// 刪除圖片
  deleteBackup: function(imgItem){
    wx.request({
      url: imageUrl + '?md5=' + 'c272fb65f82896887eaf7d99bf90856d',
      //這裡的url跟上面的下載圖片中的url是一樣的
      method : 'DELETE',//請求方法
      //請求成功的回撥函式
      success : function(res){
        console.log(res.data)
        
//這裡主要的作用:只要是刪除成功,就彈出小方框 wx.showToast({ title: '刪除成功', }) } }) }
關於backup.js的刪除功能程式碼

第二步:執行程式,在執行時,可以發現有錯誤存在,但是可以刪除圖片,先看看問題,如下:

(1)在小程式所呈現的錯誤,如下:

(2)再看看Django所刪的圖片是否存在,並且有哪些問題存在,如下:
  先看圖片是否已經刪掉了,注:在程式碼中所要刪除的圖片名為“c272fb65f82896887eaf7d99bf90856d.jpg”,再看Django中的images檔案是否存在,如下:

  

  再看看Django報出什麼錯誤,如下:

  

(3)解決方法,如下:

  可以從“File "D:\Python\小程式\git01\apis\viewss\image.py", line 133, in deleteresponse = self.wrap_json_response(code=ReturnCode.SUCCESS, message=message)UnboundLocalError: local variable 'message' referenced before assignment”看出在image.py中的133行中的message有問題,看看image.py中133行的錯誤,如下:

  

  從上面的問題可以看出message是高亮顯示的,那怎麼解決的,解決方法是給message定義預設值即可(完成以後再次執行程式,可以正常運行了,沒有任何問題存在),定義方法如下:

  

關於最終的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
        })
      }
    })
  },

  // 刪除圖片
  deleteBackup: function(imgItem){
    wx.request({
      url: imageUrl + '?md5=' + 'c272fb65f82896887eaf7d99bf90856d',
      //這裡的url跟上面的下載圖片中的url是一樣的
      method : 'DELETE',//請求方法
      //請求成功的回撥函式
      success : function(res){
        console.log(res.data)
        //這裡主要的作用:只要是刪除成功,就彈出小方框
        wx.showToast({
          title: '刪除成功',
        })
      }
    })
  }
});
完整的backup.js程式碼