在Vue.js中，你可以通过组合使用JavaScript的fetch API来获取图片的Blob数据，并通过HTTP请求将其发送到Django后端。以下是一个基本的示例，这个过程通常分为两个步骤：首先是在Vue组件中获取Blob数据并发送到后端，其次是在Django后端接收并处理这些数据。
前端Vue.js代码
在Vue组件中，你可以使用fetch来获取图片的Blob数据，并使用FormData将其发送到后端。以下是一个Vue组件中的方法示例：
<template> <div> <!-- 假设有一个按钮用于触发图片上传 --> <button @click="uploadImage">上传图片</button> </div> </template> <script> export default { data() { return { imageURL: 'http://example.com/path/to/your/image.jpg', // 图片URL }; }, methods: { async uploadImage() { try { const response = await fetch(this.imageURL); const blob = await response.blob(); const formData = new FormData(); formData.append('image', blob, 'image.jpg'); // 'image.jpg'是文件名，根据实际情况修改 // 发送请求到Django后端 const uploadResponse = await fetch('/upload_image/', { method: 'POST', body: formData, // 注意：当使用FormData时，不需要手动设置Content-Type头部，浏览器会自动处理 }); if (!uploadResponse.ok) { throw new Error('Image upload failed'); } const uploadResult = await uploadResponse.json(); console.log('上传成功', uploadResult); } catch (error) { console.error('上传失败', error); } }, }, }; </script>
后端Django代码
在Django后端，你需要创建一个视图来处理接收的图片数据：
# views.py from django.http import JsonResponse from django.views.decorators.csrf import csrf_exempt from django.core.files.storage import default_storage from django.core.files.base import ContentFile @csrf_exempt # 如果你的前端和后端不在同一个域，可能需要禁用CSRF保护 def upload_image(request): if request.method == 'POST' and request.FILES.get('image'): image = request.FILES['image'] save_path = 'uploads/images/' + image.name path = default_storage.save(save_path, ContentFile(image.read())) return JsonResponse({'message': '
