要使用fetch上传压缩过的图片，你需要先将图片压缩，然后将其转换为可以上传的格式。以下是一个简单的例子，展示如何使用fetch和canvas元素压缩图片并上传：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
function compressAndUploadImage(file, uploadUrl) { // 创建一个新的FileReader对象 const reader = new FileReader(); reader.onload = function(event) { // 当图片加载完成后，将其压缩并上传 const img = new Image(); img.src = event.target.result; img.onload = function() { // 创建一个canvas元素并在其上绘制压缩后的图片 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 将canvas转换为blob数据 canvas.toBlob(function(blob) { // 使用fetch上传图片 const formData = new FormData(); formData.append('image', blob, 'compressed_image.jpg'); fetch(uploadUrl, { method: 'POST', body: formData }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); }, 'image/jpeg', 0.7); // 0.7是压缩质量，可以根据需要调整 }; }; // 读取文件并开始压缩过程 reader.readAsDataURL(file); } // 使用方法： // 假设你有一个<input type="file">元素和一个上传URL const input = document.getElementById('image-input'); const uploadUrl = 'https://your-upload-api.com/upload'; input.addEventListener('change', function(e) { compressAndUploadImage(e.target.files[0], uploadUrl); }); |
在这个例子中，我们定义了一个compressAndUploadImage函数，它接受一个文件和上传的URL。
然后，我们使用FileReader来读取文件，当文件加载完成后，我们创建一个新的Image对象，并在图片加载完成后将其绘制到canvas上。
在canvas上，我们使用toBlob方法将其转换为一个新的压缩过的blob，然后使用fetch和FormData上传这个blob到服务器。
浏览量: 0