Django实战-服务端图片上传

Django实战-小程序端图片上传

Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(表单)的使用。

会发现上一节中的小程序端调用自带的选择图片上传接口,可以获取到图片的路径和图片的名字以及md5值。根据小程序助手的功能需要在服务端对图片上传接口实现上传、获取、更新、删除操作。对于这些操作同样可以用 View 类视图函数实现。

from django.views import View

一、上传图片文件

  // 上传图片文件
  uploadFiles: function() {
    var that = this
    that.setData({
      newBackupedFiles: []
    })
    // 读取文件路径
    for (var i = 0; i < this.data.needUploadFiles.length; i++) {
      var filePath = this.data.needUploadFiles[i]
      wx.uploadFile({
        url: app.globalData.serverUrl + app.globalData.apiVersion + '/service/image',
        filePath: filePath,
        name: 'test',
        success: function(res) {
          // 取出文件的名字和 nmd5
          var res = JSON.parse(res.data)
          var md5 = res.data[0].md5
          var name = res.data[0].name
          var newImageItem = {
            "md5": md5,
            "name": name
          }
          that.downloadFile(newImageItem)
        }
      })
    }
    wx.showToast({
      title: '上传成功',
    })
    // 把上传的列表清空
    this.setData({
      needUploadFiles: []
    })
  }

二、下载图片

// 下载图片
  downloadFile: function(imgItem) {
    // 通过函数的参数 imgItem,将 md5 传进来
    var that = this;
    wx.downloadFile({
      url: app.globalData.serverUrl + app.globalData.apiVersion + '/service/image' + "?md5=" + imgItem.md5,
      success: function(res) {
        
        // 临时路径
        var filepath = res.tempFilePath
        // var tmpPath = imgItem.md5
        
        var newDownloadedBackupedFiles = that.data.downloadedBackupedFiles
        
        // 取出图片路径
        imgItem.path = filepath
        
        // 容易出错
        newDownloadedBackupedFiles.unshift(imgItem)
        // newDownloadedBackupedFiles.push(tmpPath)
        that.setData({
          downloadedBackupedFiles: newDownloadedBackupedFiles
        })
        console.log(newDownloadedBackupedFiles)
      }
    })
  }

三、服务端图片上传

from django.http import FileResponse, JsonResponse
class ImageView(View, CommonResponseMixin):
    def get(self, request):
    
            return JsonResponse(data=response, safe=False)

    def post(self, request):
        # 获取文件
        # 取出文件的 key 和 value
        # 读取文件
        # 指定文件路径
        # 保存文件
        return JsonResponse(data=response, safe=False)

    def put(self, request):
    
        return JsonResponse(data=response, safe=False)

    def delete(self, request):
       
        return JsonResponse(data=response, safe=False)
def get(self, request):
    md5 = request.GET.get("md5")
        imgfile = os.path.join(settings.IMAGES_DIR, md5 + '.jpg')
    if os.path.exists(imgfile):
        data = open(imgfile, 'rb').read()
        return FileResponse(open(imgfile, "rb"), content_type="image/jpg")
    else:
        response = self.wrap_json_response(code=ReturnCode.RESOURCES_NOT_EXISTS)
        return JsonResponse(data=response, safe=False)
def post(self, request):
    # 获取文件
    files = request.FILES
    response = []
    # 取出文件的 key 和 value
    for key, value in files.items():
        # 读取文件
        content = value.read()
        md5 = hashlib.md5(content).hexdigest()
        # 指定文件路径
        path = os.path.join(settings.IMAGES_DIR, md5 + '.jpg')
        with open(path, 'wb') as f:
            # 保存文件
            f.write(content)
        response.append({
            "name": key,
            "md5": md5
        })
        message = 'post method success.'
    response = self.wrap_json_response(data=response, code=ReturnCode.SUCCESS, message=message)
    return JsonResponse(data=response, safe=False)
def put(self, request):
        message = "put method success"
    response = self.wrap_json_response(message=message)
    return JsonResponse(data=response, safe=False)
def delete(self, request):
    md5 = request.GET.get('md5')
    img_name = md5 + '.jpg'
    path = os.path.join(settings.IMAGES_DIR, img_name)
    if os.path.exists(path):
        os.remove(path)
        message = "remove success"
    else:
            message = "file(%s) not found." % img_name
    response = self.wrap_json_response(message=message, code=ReturnCode.SUCCESS)
    return JsonResponse(data=response, safe=False)

本文分享自微信公众号 - 数据云团(SmartData)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏fanzhh的技术笔记

Chrome中克服CORS限制

在使用React+Django REST开发中,前端需要通过jquery获取本地Django API数据,遇到了这样的错误:

18710
来自专栏数据云团

Django源码学习-17-Forms

Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(...

6820
来自专栏fanzhh的技术笔记

Django REST + React + Redux 上传文件

9520
来自专栏数据云团

Django源码学习-18-ModelForm

Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(...

7120
来自专栏腾讯云IoT

【IoT迷你赛】基于Django和TencentOS tiny的IoT智能灯系统设计

如今,工业,农业,生活里面的很多设备已经接入物联网,这些设备通过同一的平台进行管理。但是,每家厂商都自己接入自己的物联网设备,造成了设备与平台的割裂。所以打通设...

23760
来自专栏Python爬虫与数据挖掘

Flask vs Django,Python Web 开发用哪个框架更好?

您是否正在考虑使用 Python 开发网站?然后你可能听说过 Django 和 Flask。这两个是 Python 最流行的 Web 框架(当然还有更多)。现在...

34340
来自专栏算法channel

资深程序员骆昊:Python从新手到大师,100天完整学习路线

摘要:最近后台有些小伙伴在问我Python入门的问题,我推荐这个学习路线资料,可能你们有些已经在使用它,的确它是我见过最全的、最富有逻辑体系的Python技术栈...

57420
来自专栏fanzhh的技术笔记

如何在DjangoRestFramework和ExpressJS中分别设置CORS

8330
来自专栏fanzhh的技术笔记

Git, Django, 和 virtualenv的结合应用

Git是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。

7620
来自专栏数据云团

Django源码学习-20-QueryDict

Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(...

7610

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励