前端(Vue)上传图片到七牛云与后端(Django)上传图片到七牛云

前端(Vue)上传图片到七牛云与后端(Django)上传图片到七牛云

在开发项目的时候，经常会用到上传图片的功能，如果把图片全都存放在项目路径下，会导致项目越来越臃肿，因此可以考虑把图片上传交给第三方处理，此处采用七牛云进行图片存储。

经过测试，通过七牛云获取图片确实比直接通过自己的服务器获取的速度要快得多，赶快去注册七牛云吧。

上传方式
上传图片的方式有两种：

1 .通过服务器：将文件传到服务端，由服务端上传到七牛云

2 .通过前端JS：将文件直接从JS上传到七牛云。

3 .两种方式都可以完成上传，但是前者还需占用服务端的带宽来上传文件，然后再由服务端上传；而后者仅占用客户端的资源，这样可以减轻服务端的压力。

Vue上传图片到七牛云

Django上传图片到七牛云

1. 安装七牛云的SDK

 pip install qiniu

2. Django项目中的配置

QINIU_ACCESS_KEY = '你的七牛云access_key'
QINIU_SECRET_KEY = '你的七牛云secert_key'
QINIU_BUCKET_NAME = '你的bucket_name'

3 .上传文件

import io
import uuid

import qiniu
from PIL import Image
from django.conf import settings

q = qiniu.Auth(settings.QINIU_ACCESS_KEY, settings.QINIU_SECRET_KEY)

def upload(img):
    _img = img.read()
    size = len(_img) / (1024 * 1024)  # 上传图片的大小 M单位
    
    image = Image.open(io.BytesIO(_img))
    
    key = str(uuid.uuid1()).replace('-', '')

    name = 'upfile.{0}'.format(image.format)  # 获取图片后缀（图片格式）
   
    if size > 1:
        # 压缩
        x, y = image.size
        im = image.resize((int(x / 1.73), int(y / 1.73)), Image.ANTIALIAS) #等比例压缩 1.73 倍
    else:
        # 不压缩
        im = image
    
    im.save('./media/' + name)  # 在根目录有个media文件
    path = './media/' + name
    
    token = q.upload_token(settings.QINIU_BUCKET_NAME, key, 3600,)
    
    qiniu.put_file(token, key, path)
    url = 'http://7u2iif.com1.z0.glb.clouddn.com/{}'.format(key)
    return url

4.视图

from web.uploadpic import upload

def uploadpic(request):
    img = request.FILES['file']
    url = upload(img)
    return HttpResponse(url)