网络图片怎么转成formdata上传

网络图片转成FormData上传通常是在浏览器环境中处理文件上传时的操作。当你需要将图片作为表单数据发送到服务器时，可以按照以下步骤进行：

1. 获取图片：首先，使用`HTMLInputElement.files`获取用户选择的图片，例如通过`<input type="file" accept="image/*">`元素。

const fileInput = document.getElementById('imageUpload');
const selectedImage = fileInput.files[0];

2. 创建FileReader：创建一个FileReader对象，它能读取文件内容。

const reader = new FileReader();

3. 读取图片：设置FileReader的readAsDataURL方法来读取图片的Base64编码。

reader.readAsDataURL(selectedImage);

4. 当读取完成后（onload事件触发），Base64编码已准备好，将其转换成Blob对象，因为FormData需要Blob或ArrayBuffer。

reader.onload = function() {
    const base64Data = reader.result.split(',')[1]; // 去掉前缀"data:image/"
    const blob = dataURLtoBlob(base64Data);
    
    // 将Blob对象添加到FormData
    const formData = new FormData();
    formData.append('image', blob);
};

5. 函数dataURLtoBlob用于将Base64字符串转换为Blob：

function dataURLtoBlob(dataUrl) {
    const contentType = dataUrl.match(/;base64,(.*)/)[1];
    return atob(dataUrl.replace(/^data:image\/(.*);base64,/,'')) 
        .split(',')
        .map(function(chunk) { return Uint8Array.from(chunk, function (char) { return char.charCodeAt(0); }); })
        .reduce((a,b) => a.concat(b), new Uint8Array());
}

6. 发送FormData：最后，你可以使用fetch API、XMLHttpRequest或者其他库（如axios）发送包含Blob数据的FormData到服务器。

// 使用fetch
fetch('/api/upload-image', {
    method: 'POST',
    body: formData
}).then(response => response.json())