从浏览器而不是邮递员提交时，Django端点上载图像失败

Question

I'm building a solution that takes screenshots from a web browser and sends it to a django endpoint. The solution works when I use postman to send the information. However when I use my javascript google chrome extension it fails. the information I send is composed of two fields image(text) and dashboard_type(text),

views.py

class ScreenShotUpload(APIView):
    def post(self, request, format=None):
        dashboard_type = request.data.get("dashboard_type", None)
        image_str = request.data.get("image", None)
        if dashboard_type is None or image_str is None:
            return Response({"Error": "invalid entry"}, status.HTTP_400_BAD_REQUEST)
        if dashboard_type not in [ScreenShot.SH, ScreenShot.WE, ScreenShot.PA, ScreenShot.PR]:
            return Response(
                {"Error": "invalid dashboard_type, must be either PA, PR, SH or WE"}, status.HTTP_400_BAD_REQUEST)
        ScreenShot.objects.filter(is_latest=True).update(is_latest=False)
        new_screenshot = ScreenShot(dashboard_type=dashboard_type, is_latest=True)
        new_screenshot.set_image_path()
        new_screenshot.save_image_str(image_str)
        new_screenshot.save()
        return Response({"status": "200"}, status.HTTP_200_OK)

chrome-extension.js

var id = 100;

chrome.browserAction.onClicked.addListener(function() {

  chrome.tabs.captureVisibleTab(null, {format: "jpeg", quality: 100}, function(screenshotUrl) {
    var xhr = new XMLHttpRequest() , formData = new FormData();
    formData.append("image", screenshotUrl);
    formData.append("dashboard_type", "SH");
    xhr.open("POST", "http://intranet/api/powerbi/screenshots_upload/");
    xhr.send(formData);
    var viewTabUrl = chrome.extension.getURL('screenshot.html?id=' + id++)
    var targetId = null;


  });
});

As I wrote above, when I use postman to send the image as a base64 string that represents an image it works but when I use this script it fails(image corrupted) the size of the image is smaller when I send it with the script than postman. I narrowed down to two possibilities either the xhr request doesn't send the full image or I need to parse the request.data differently. Can someone explain what is going on? thank you.

Answer 1

我必须删除data：image / jpeg; base64，我之前曾尝试在字符串上执行replace（“ data：image / jpeg; base64，”，“”），但是使用索引却无法正常工作，例如image_str = image_str [23：]