python - Ionic 中的多部分文件上传

Question

我正在尝试将带有一些附加数据的图片上传到我的服务器。我的 angularJs 代码是:

function create_question(question, callback){

    var form = new FormData()

    var settings = {
        "url":  "http://127.0.0.1:8000/" + "question/api/create_question/",
        "method": "POST",
        "headers": {
            'Content-Type': undefined
        },
        "processData": false,
        "data": form
    }

    $cordovaFile.readAsDataURL(cordova.file.dataDirectory, question.name)
        .then(function (success) {
            form.append("file", success)
            form.append("title", question.title)
            form.append("options", JSON.stringify(question.options))
            form.append("correct_option", question.correct_option)
            form.append("question_id", question.question_id)
            form.append("project_id", question.project_id)
            $http(settings).then(function (response) {
                if (response.data.hasOwnProperty("date_str")) {
                    callback(true, response.data)
                    console.log("succesFull")
                } else {
                    console.log(JSON.stringify(response.data))
                    callback(false, response.data)
                }
            }, function (response) {
                console.log(Utf8Decode(response.data))
                callback(false, response.data)
            });

            // success
        }, function (error) {
            callback(false,error)
            // error
        });
}

在我的服务器中，我有这样的 View :

@parser_classes((MultiPartParser, ))
class CreateQuestion(APIView):
  def post(self, request, format=None):

    picture = request.data['file']
    question_id = request.data['question_id']
    project_id = request.data['project_id']
    options = request.data['options']
    title = request.data['title']
    correct_option = request.data['correct_option']
    username = request.user.username

    project = Project.objects.get(project_id=project_id)
    if project.owner_user.username == username:
        ext = '.jpg'
        aws = AWSClient()
        picture_name = question_id + ext
        picture_url = aws.put(picture, 'question_pictures', picture_name)
        question = Question.objects.create(question_id=question_id, title=title,
                                           picture_url=picture_url, options=options, owner_project=project,
                                           correct_option=correct_option)
        project.question_count += 1
        project.picture_url = picture_url
        project.save()
        serializer = QuestionSerializer(question, context={"request": request})
        return JsonResponse(serializer.data)
    else:
        return JsonResponse({"result": "fail"})

在我提出请求后，问题已创建，图片文件已上传到 Amazon S3。但是，我无法在我的电脑中打开生成的文件。我哪里做错了？

Answer 1

在网上查了很久，终于找到了答案。首先，我用

读取文件

$cordovaFile.readAsArrayBuffer(directory,filename)

之后，我使用以下文件创建了一个 Blob 对象:

var imgBlob = new Blob([success], { type: "image/jpeg" } );

我最终的 angularJS 代码是:

function create_question(question, callback){

    var form = new FormData()

    $cordovaFile.readAsArrayBuffer(cordova.file.dataDirectory, question.name)
        .then(function (success) {
            var imgBlob = new Blob([success], { type: "image/jpeg" } );
            form.append("file", imgBlob)
            form.append("title", question.title)
            form.append("options", JSON.stringify(question.options))
            form.append("correct_option", question.correct_option)
            form.append("question_id", question.question_id)
            form.append("project_id", question.project_id)

            var settings = {
                "url":  "http://127.0.0.1:8000/" + "question/api/create_question/",
                "method": "POST",
                "headers": {
                    'Content-Type': undefined
                },
                "filename": question.id,
                "processData": false,
                "data": form,
                "file": success,
                "filename": "file"
            }



            $http(settings).then(function (response) {
                if (response.data.hasOwnProperty("date_str")) {
                    callback(true, response.data)
                    console.log("succesFull")
                } else {
                    console.log(JSON.stringify(response.data))
                    callback(false, response.data)
                }
            }, function (response) {
                console.log(JSON.stringify(response.data))
                callback(false, response.data)
            });

            // success
        }, function (error) {
            callback(false,error)
            // error
        });
}