VB.net 通过JS上传图片FormData 后端接收低码
时间: 2024-09-30 19:10:41 浏览: 11
在VB.NET中,如果你想通过JavaScript的FormData对象上传图片到后端服务器,并处理后端返回的低码图片(可能是指压缩后的图片),你可以按照以下步骤操作:
1. HTML部分(前端):
```html
<form id="uploadForm" method="POST" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*" onchange="uploadImage()"/>
</form>
<script src="script.js"></script>
```
2. JavaScript (script.js)部分:
```javascript
function uploadImage() {
var fileInput = document.getElementById('image');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('image', file);
fetch('/api/upload', {
method: 'POST',
body: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => response.blob())
.then(blob => decodeImage(blob))
.catch(error => console.error(error));
}
function decodeImage(blob) {
return URL.createObjectURL(blob);
}
```
这里,`decodeImage`函数用于接收后端返回的blob并将其转换为HTML可以显示的URL。
3. 后端(VB.NET, 可能是ASP.NET MVC、Web API等):
```csharp
[HttpPost]
public async Task<IActionResult> Upload(IFormFile image)
{
// 检查文件是否有效
if (image == null || !image.FileName.EndsWith(".jpg", StringComparison.OrdinalIgnoreCase))
{
return BadRequest("Invalid file format");
}
// 将文件保存到服务器并压缩(这里假设使用的是System.Drawing.Image)
byte[] compressedData = CompressImage(image.OpenReadStream());
// 返回低码图片数据
return File(compressedData, "image/jpeg", "compressed_image.jpg"); // 根据实际需要替换"compressed_image.jpg"
}
private byte[] CompressImage(Stream input)
{
// 使用ImageCodecInfo和EncoderParameters实现图像压缩
// 这里省略了具体的编码细节,你需要查找相关的库或API来实现压缩
// 假设CompressImageCore方法实现了压缩功能
return CompressImageCore(input);
}
```