img里是blob如何上传到服务器

要将以Blob形式存在的图片上传到服务器，通常需要经历以下几个步骤：

1. 获取Blob对象：可以通过各种方式获得Blob对象，比如从用户的文件输入中获取Blob，或者通过Canvas元素将图像转换为Blob格式。

2. 创建FormData对象：FormData对象用于将数据以二进制形式打包，并且在HTTP请求中传递。可以通过new FormData()来创建一个FormData对象。

3. 将Blob对象添加到FormData对象中：使用append()方法将Blob对象添加到FormData对象中，并指定一个字段名。例如，可以使用formData.append('file', blob)将Blob对象添加到名为'file'的字段中。

4. 发送FormData对象到服务器：可以使用XMLHttpRequest或fetch API将FormData对象发送到服务器。使用XMLHttpRequest的示例代码如下：

var formData = new FormData();
formData.append('file', blob);

var xhr = new XMLHttpRequest();
xhr.open('POST', '服务器地址', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 上传成功
    }
};
xhr.send(formData);

5. 在服务器端接收并处理上传的文件：根据服务器的编程语言和框架，可以使用相应的方法来接收并处理上传的文件。例如，对于Node.js可以使用multer中间件来处理文件上传。

总结：
通过以上步骤，可以将以Blob形式存在的图片上传到服务器。需要注意的是，在发送HTTP请求时，需要将Blob对象添加到FormData对象中，并通过相应的方法将FormData对象发送到服务器。在服务器端，需要使用相应的方法来接收并处理上传的文件。

要将图像以Blob的形式上传到服务器，可以按照以下步骤进行操作：

1. 获取图像文件：可以通过文件输入元素的change事件监听器来获取用户选择的图像文件。使用JavaScript可以获取到所选图像文件的File对象。

<input type="file" id="imageUpload" accept="image/*">

<script>
    var imageUpload = document.getElementById('imageUpload');

    imageUpload.addEventListener('change', function() {
        var file = imageUpload.files[0];
        // 进一步处理文件
    });
</script>

2. 创建Blob对象：使用JavaScript的Blob 构造函数，可以创建一个blob对象。Blob对象是一个类似于文件的原始数据对象，包含了图像文件的二进制数据以及元数据。

var blob = new Blob([file], { type: file.type });

3. 创建FormData对象：FormData对象可以帮助我们在HTTP POST请求中传输表单数据。我们可以使用FormData对象将Blob对象添加为一个数据字段，然后将其发送到服务器。

var formData = new FormData();
formData.append('image', blob, file.name);

4. 发送HTTP请求：使用XMLHttpRequest对象或者Fetch API发送HTTP请求，将FormData对象作为请求的payload发送到服务器。

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
    // 请求完成后的处理
};
xhr.send(formData);

5. 服务器端处理：服务器端需要接收这个HTTP请求，并处理上传的Blob数据。具体实现会根据使用的服务器端技术有所不同。常见的服务器端语言如PHP、Node.js等提供了相应的API来处理文件上传。

以上就是将以Blob形式上传到服务器的基本步骤。具体的实现会依赖于使用的编程语言、框架和服务器环境。可以根据自己的需求进行相应的调整和优化。

将blob从img标签上传到服务器可以通过以下步骤实现：

1. 获取blob对象：使用JavaScript的File API或者Canvas API可以获取到blob对象。例如，可以通过从用户选择的文件中创建一个File对象，然后使用FileReader对象的readAsDataURL方法将文件内容读取为data URL，再使用URL对象的createObjectURL方法将data URL转换为blob URL。

2. 创建FormData对象：FormData对象用于将数据编码成适用于HTTP请求的键值对形式。可以使用FormData对象将blob对象添加到表单数据中。

3. 发送上传请求：使用XMLHttpRequest对象或者fetch API发送HTTP请求将FormData对象上传到服务器。确保请求的method为POST，并将表单数据作为请求的主体。

下面是一个示例代码，在html页面中上传img标签中的blob对象到服务器：

// HTML
<input type="file" id="file-input">
<img id="image-preview">
<button id="upload-button">上传</button>

// JavaScript
document.getElementById('file-input').addEventListener('change', function(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  
  reader.onload = function(event) {
    var dataURL = event.target.result;
    document.getElementById('image-preview').src = dataURL;
  };
  
  reader.readAsDataURL(file);
});

document.getElementById('upload-button').addEventListener('click', function() {
  var imageBlob = getBlobFromImage();
  uploadBlobToServer(imageBlob);
});

function getBlobFromImage() {
  var img = document.getElementById('image-preview');
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  context.drawImage(img, 0, 0);
  return canvas.toDataURL('image/jpeg');
}

function uploadBlobToServer(blob) {
  var formData = new FormData();
  formData.append('image', blob);
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('上传成功');
    }
  };
  
  xhr.send(formData);
}

在上面的示例中，当用户选择一个文件时，会将文件内容读取为data URL并显示在img标签中。然后，当用户点击"上传"按钮时，将img中的blob对象转换为data URL，再添加到FormData对象中。最后，使用XMLHttpRequest对象发送HTTP POST请求将FormData对象上传到服务器。服务器端接收到请求之后，可以通过相应的后端技术将blob对象保存到服务器。