fetch相关文章列表

使用fetch上传压缩过的图片

lyingzhu 2024年8月5日 2024年8月5日

要使用fetch上传压缩过的图片，你需要先将图片压缩，然后将其转换为可以上传的格式。以下是一个简单的例子，展示如何使用fetch和canvas元素压缩图片并上传：

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);
});

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);

});

在这 …