Vue传图片给Django后传给OSS

Vue传图片给Django后传给OSS

后端调用oss2接口上传图片

接口配置

import oss2
import uuid

# 用户账号密码，第三部说明的Access
# 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
# 获取的AccessKey
auth = oss2.Auth('<yourAccessKeyId>', '<yourAccessKeySecret>')
# 这个是需要用特定的地址，不同地域的服务器地址不同，不要弄错了
endpoint = '...'
# 你的项目名称，类似于不同的项目上传的图片前缀url不同
# 因为我用的是ajax传到后端方法接受的是b字节文件，需要如下配置。 阿里云oss支持更多的方式，下面有链接可以自己根据自己的需求去写
bucket = oss2.Bucket(auth, endpoint, 'study-sys-prac')  # 项目名称

上传oss服务器获取url

# 上传文件到OSS服务器，并获取url
def upload_object(obj, suffix_name):
    number = uuid.uuid4()
    base_file_name = str(number) + suffix_name
    result = bucket.put_object(base_file_name, obj) # 文件上传
    url = bucket.sign_url('GET', base_file_name, 3600, slash_safe=True) # url获取
    if result.status == 200:
        return url
    else:
        return False

Vue传递图片给后端

方法一：通过base64类型传输

缺点是base64不能直接传递给oss，需要先进行解码。

vue前端代码

imgAdd(pos,imgFile){
        editorMethods.uploadPic(imgFile.miniurl).then(res=>{
          console.log(res)
          this.$refs.md.$img2Url(pos, res.data.url);
        })
      },

uploadPic(file){
    return request({
      url:'/backend/upload_photo',
      method:'post',
      data:{image: file},
    })
  },

Django 后端

@csrf_exempt 
def upload_photo(request):
    data = request.body
    json_result = json.loads(data)
    base64_img = json_result['pic'] # 获取到的是形如 data:...; base64, ...
    # 获取base64那串字符
    base64_img = base64_img.partition(",")[2] 
    # 将base64转为image类型
    imgdata = base64.b64decode(base64_img)
    oss_url = upload_object(imgdata, '.png')
    if oss_url:
        res = {'code': 2000,
                'description': '获取成功',
                'data': {'url': oss_url}}
    else:
        res = {'code': 5000,
                'description': '获取失败',
                'data': {}}
    return JsonResponse(res)

方法二：通过file类型传输

vue 前端——使用FormData

imgAdd(pos,imgFile){
        //将文件放到formData中
        var formdata = new FormData()
        formdata.append('image', imgFile,imgFile.name);
        //上传
        editorMethods.uploadPic(formdata).then(res=>{
          console.log(res)
          this.$refs.md.$img2Url(pos, res.data.url);
        })
      },

uploadPic(file){
    return request({
      url:'/backend/upload_photo',
      method:'post',
      data:file, // 坑点：必须直接传file，不能进行再一层dict包装
    })
  },

Django 后端——使用request.FILES

@csrf_exempt 
def upload_photo(request):
    photo = request.FILES.get('image').read() # file的获取
    oss_url = upload_object(photo, '.png')
    if oss_url:
        res = {'code': 2000,
                'description': '获取成功',
                'data': {'url': oss_url}}
    else:
        res = {'code': 5000,
                'description': '获取失败',
                'data': {}}
    return JsonResponse(res)