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

原创

于 2019-03-26 22:18:41 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #图片上传 #七牛云 #图片上传加预览 #vue上传图片

本文详细介绍了如何使用Vue进行图片上传到七牛云，并将图片缓存到本地，同时实现预览功能。后台使用了Django框架，需要注意跨域和CSRF问题的解决。在Vue中，还提供了相应的CSS样式辅助展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台(我用的是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')
        # 上传到七牛后保存的文件名