Question

**我使用网络摄像头为用户拍照。然后将此照片转换为文件，以便将其发送到服务器。我使用表单数据发送此文件，它给了我400警告**

async  function postImage(url, _image) {
    let response = await fetch(url, {
        method: 'POST',
        body: _image
    });
    let uploadImage = await response.json();
    return uploadImage;
}


let video = document.getElementById('video');
let canvas = document.getElementById('canvas');

let cameraStream = null;

if (null == cameraStream) {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
        navigator.mediaDevices.getUserMedia({video: true})
            .then(function (stream) {
                video.srcObject = stream;
                video.play();
                cameraStream = stream;
            })
    }
}

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

document.getElementById("snap").addEventListener('click', () => {
    video.style.display = 'none';

    if (null != cameraStream) {
        let context = canvas.getContext('2d');
        let img = canvas.toDataURL('image/png', 0.5);
        let file = dataURItoBlob(img);

        context.drawImage(video, 0, 0, 640, 480);
        let track = cameraStream.getTracks()[ 0 ];
        track.stop();
        video.load();
        cameraStream = null;

        let formData = new FormData();
        formData.append("objectable",'attendance_times')
        formData.append("filePath", file, "image.png");

        for (var value of formData.values()) {
            console.log(value);
        }

        setTimeout(()=>{
            postImage(base_url+'/api/media', formData)
                .then(data => console.log(data))
                .catch(err => console.log(err));
        },2000)

    }

})

        <video id="video" width="400" height="400" autoplay></video>
        <canvas id="canvas" width="640" height="480"></canvas>
        <button type="submit" class="btn btn-success btn-lg btn-block" id="snap">snap photo</button>

很遗憾，我无法发送此文件 我不知道此代码的问题在哪里。如果此问题可以解决，请提供帮助

Answer 1

我认为您的帖子不会那样运作。也许看看formdata对象。

用JavaScript拍摄网络摄像头的照片并将其发送到数据库

1 个答案: