vue上传图片到七牛云并缓存到本地加预览效果，超详细代码加注释

后台(我用的是django框架，flask框架于此类似)
注意：
1.django（默认是8000）与vue的端口号（一般是8080）不一样会跨域
可以在setting中设置白名单，可以参考
2.需要解决django的防csrf
简单粗暴的方法：可以注释 MIDDLEWARE=[ #‘django.middleware.csrf.CsrfViewMiddleware’,]
但这样不安全，其他解决方案参考

import pycharm_study_django.settings as settings#导入配置文件
from django.http import JsonResponse
import uuid #用于生成唯一的文件名（即图片名）
def qiniuupToken(request):
    if request.method == 'POST':
    try:
        # 需要填写你的 Access Key 和 Secret Key
        access_key = '你的七牛云密钥'
        secret_key = '你的七牛云私钥'
        # 构建鉴权对象
        q = Auth(access_key, secret_key)
        # 指定要上传至的七牛云的空间
        bucket_name = '空间名'
        # 取到前端传过来的图片，request.FILES 是类似json：key是html中 input的name，value是文件
        file=request.FILES.get('usericon')
        # usrid=request.POST.get('userid')
        # 上传到七牛后保存的文件名
        keyname = str(uuid.uuid4()) + '.' + file.name.split('.')[1]
        # 生成上传 Token，可以指定过期时间等
        token = q.upload_token(bucket_name, keyname, 3600)
        # # 保存文件到本地服务器，如果不想缓存到本地可以不写
        with open(keyname, 'wb') as fp:
            for c in file.chunks():
                fp.write(c)
        #  要上传到七牛云的图片名
        localfile = keyname  #文件名
        ret, info = put_file(token, keyname, localfile)
        # print('七牛云存储')
        # print(info)
        assert ret['key'] == keyname
        assert ret['hash'] == etag(localfile)

        # # 此处要写加入数据库代码
        src='http://povdy95qx.bkt.clouddn.com/'+keyname #七牛云的图片地址，传给前台并写入数据库

        return JsonResponse({"code": "908", "qiniu_token": token,'src':src})
    except Exception as ex:
        print('error-------------------------')
        print(ex)
        return JsonResponse({"code": "408"})
else:
    return JsonResponse({"code": "408"})

vue

css样式
https://blog.csdn.net/weixin_43807076/article/details/88849735