无法从 React js 中的 Service Worker 将文件上传到 Django 服务器

Question

这是我的background-worker.js 文件中的代码，应该负责上传blob

const addExerciseDataToDatabase = async (blob, exercise, patient, authToken) => {
    const databaseURL = 'http://127.0.0.1:8000/exercise_record/';

    const fileName = 'video.webm';
    const file = new File([blob], fileName, { type: blob.type });

    const formData = new FormData();
    formData.append('date', getDateWithFormat());
    formData.append('exercise', exercise);
    formData.append('patient', patient);
    formData.append('blob', file);

    const headers = new Headers({
        'Authorization': `Token ${authToken}`,
        'Content-Type':'multipart/form-data'
    });

    try {
        const response = await fetch(databaseURL, {
            method: 'POST',
            headers,
            body: formData,
        });

        if (response.ok) {
            console.log('Data Added to Database');
        } else {
            console.error('Failed to add data to the database:', response);
        }
    } catch (error) {
        console.error('Error while making the request:', error);
    }
};


// Listen for messages from the main script
this.addEventListener('message', async (event) => {
    const data = event.data;
    if (data.blob) {
        let blob = data.blob;
        console.log(blob);

        try {
            // await uploadFileFirebase(blob);
            await addExerciseDataToDatabase(blob, data.exercise, data.patient, data.authToken)

        } catch (error) {
            console.log(error);
        }
    }
});


const getDateWithFormat = () => {
    var currentDate = new Date();
    var year = currentDate.getFullYear();
    var month = String(currentDate.getMonth() + 1).padStart(2, '0');
    var day = String(currentDate.getDate()).padStart(2, '0');
    var formattedDate = year + '-' + month + '-' + day;
    return formattedDate
}

这是我在 django 中的模型

class ExerciseRecord(models.Model):
    patient = models.ForeignKey(Patient, on_delete=models.CASCADE, related_name='exercise_records')
    exercise = models.ForeignKey(Exercise, on_delete=models.CASCADE, related_name='exercise_records')
    date = models.DateField()
    video = models.CharField(max_length=255, default='', null=True, blank=True)
    review = models.BooleanField(null=True, blank=True)
    commment = models.TextField(blank=True)
    blob = models.FileField(upload_to='exercise_records/', null=True, blank=True)

    def __str__(self):
        return f'{self.patient} - {self.exercise} - {self.date}'

class ExerciseRecordViewSet(viewsets.ModelViewSet):
queryset = ExerciseRecord.objects.all()
serializer_class = ExerciseRecordSerializer

def get_queryset(self):
    if hasattr(self.request.user, "patient"):
        return ExerciseRecord.objects.filter(patient__user=self.request.user)
    elif hasattr(self.request.user, "fittlyf_physio"):
        patient_id = self.request.query_params.get("patient_id")
        exercise_record_id = self.request.query_params.get("exercise_record_id")

        if patient_id:
            return ExerciseRecord.objects.filter(patient__id=patient_id)
        if exercise_record_id:
            return ExerciseRecord.objects.filter(id=exercise_record_id)

def perform_create(self, request, *args, **kwargs):
    print(request.data)

    patient_exercises_ids = [
        patient_exercise.exercise.id
        for patient_exercise in PatientExercise.objects.filter(
            patient=request.data["patient"]
        )
    ]

    today_completed_exercise_ids = [
        exercise_record.exercise.id
        for exercise_record in ExerciseRecord.objects.filter(
            date=request.data["date"], patient=request.data["patient"]
        )
    ]

    completed_all_exercises = set(patient_exercises_ids) == set(
        today_completed_exercise_ids
    )
    if completed_all_exercises:
        patient_id = request.data["patient"]
        patient = Patient.objects.get(pk=patient_id)
        patient.completed_exercise_date = date.today()
        patient.save()

    serializer = ExerciseRecordSerializer(data=request.data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

我在终端收到的响应：-

Bad Request: /exercise_record/

[2023 年 10 月 13 日 10:02:54]“POST /exercise_record/HTTP/1.1”400 77

Blob {大小：64688，类型：'video/webm;codecs=vp8'}

这就是斑点在控制台中的样子

background-worker.js:51 Failed to add data to the database: Response {type: 'cors', url: 'http://127.0.0.1:8000/exercise_record/', redirected: false, status: 400, ok: false, …}
addExerciseDataToDatabase @ background-worker.js:51
await in addExerciseDataToDatabase (async)
(anonymous) @ background-worker.js:67

我收到了一些这样的回复

请帮我解决这个问题，让我知道我做错了什么，后端一切都正确，我确信这一点，因为负责文件上传的其余端点可以工作，但这个不行

当我从标题中删除内容类型时，这就是我在视图集的 print(request.data) 处得到的内容。一切正常，除了斑点是空的

{'date': '2023-10-13', 'video': None, 'review': False, 'blob': None, 'patient': 80, 'exercise': 12}

Answer 1

我发现这段代码中的后端端点也是本地的，因此如果您在本地设置文件中设置 django DEBUG=True，您可能可以从 Django stdout/logs 中获得有关正在发生的情况的更好提示。

是否与这个问题中提到的问题相同？