js实现上传图片

使用HTML5 File API实现图片上传

HTML5的File API允许通过JavaScript访问用户选择的文件。结合<input type="file">元素，可以实现图片选择和上传功能。

创建一个文件输入元素：

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

添加JavaScript事件监听：

document.getElementById('imageUpload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            document.body.appendChild(img);
        };
        reader.readAsDataURL(file);
    }
});

使用FormData对象发送图片到服务器

FormData对象可以方便地构建表单数据，适合用于文件上传。

function uploadImage(file) {
    const formData = new FormData();
    formData.append('image', file);

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log('上传成功:', data))
    .catch(error => console.error('上传失败:', error));
}

实现拖放上传功能

HTML5拖放API可以让用户通过拖放方式上传图片。

<div id="dropArea" style="width:300px;height:200px;border:2px dashed #ccc;">
    拖放图片到这里
</div>

const dropArea = document.getElementById('dropArea');

dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropArea.style.borderColor = '#666';
});

dropArea.addEventListener('dragleave', () => {
    dropArea.style.borderColor = '#ccc';
});

dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    dropArea.style.borderColor = '#ccc';
    const file = e.dataTransfer.files[0];
    if (file && file.type.match('image.*')) {
        uploadImage(file);
    }
});

预览和压缩图片

在客户端对图片进行预览和压缩可以减少服务器负担。

function compressImage(file, maxWidth, maxHeight, quality) {
    return new Promise((resolve) => {
        const img = new Image();
        img.src = URL.createObjectURL(file);

        img.onload = () => {
            const canvas = document.createElement('canvas');
            let width = img.width;
            let height = img.height;

            if (width > maxWidth) {
                height = Math.round((height * maxWidth) / width);
                width = maxWidth;
            }

            if (height > maxHeight) {
                width = Math.round((width * maxHeight) / height);
                height = maxHeight;
            }

            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);

            canvas.toBlob((blob) => {
                resolve(blob);
            }, 'image/jpeg', quality);
        };
    });
}

显示上传进度

XMLHttpRequest对象可以监控上传进度。

function uploadWithProgress(file) {
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('image', file);

    xhr.upload.addEventListener('progress', (e) => {
        const percent = Math.round((e.loaded / e.total) * 100);
        console.log(`上传进度: ${percent}%`);
    });

    xhr.addEventListener('load', () => {
        console.log('上传完成');
    });

    xhr.open('POST', '/upload');
    xhr.send(formData);
}

使用第三方库简化上传

axios库可以简化上传过程，提供更好的API。

import axios from 'axios';

function uploadWithAxios(file) {
    const formData = new FormData();
    formData.append('image', file);

    axios.post('/upload', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
            const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
            console.log(`上传进度: ${percent}%`);
        }
    })
    .then(response => {
        console.log('上传成功:', response.data);
    })
    .catch(error => {
        console.error('上传失败:', error);
    });
}