为异步http文件上载挑选文件(uri到文件路径)

异步HTTP文件上传基础概念

异步HTTP文件上传是指在不阻塞主线程的情况下，通过HTTP协议将文件从客户端上传到服务器的过程。这种方式通常使用JavaScript在前端实现，并配合后端服务来处理文件接收和存储。

优势

用户体验：用户可以在文件上传的同时继续浏览或操作页面，无需等待上传完成。
资源利用：异步上传可以更有效地利用服务器资源，避免因大文件上传导致的服务器阻塞。
错误处理：可以在上传过程中实时捕获和处理错误，提供更好的错误反馈。

类型

基于表单的上传：使用HTML <form> 元素和enctype="multipart/form-data"属性。
基于AJAX的上传：使用JavaScript的XMLHttpRequest对象或Fetch API。
基于库的上传：如jQuery File Upload, Dropzone.js等第三方库。

应用场景

社交媒体：用户上传图片或视频。
在线办公：用户上传文档或表格。
电子商务：用户上传产品图片。

技术实现

前端部分

<input type="file" id="fileInput" />
<button onclick="uploadFile()">上传文件</button>

<script>
function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    if (file) {
        const formData = new FormData();
        formData.append('file', file);

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

后端部分（Node.js示例）

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
    res.json({ message: '文件上传成功', filename: req.file.filename });
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000/');
});

遇到的问题及解决方法

问题1：上传进度无法显示

原因：默认情况下，Fetch API不提供上传进度的事件。

解决方法：使用XMLHttpRequest对象来获取上传进度。

function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    if (file) {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true);
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                const percentComplete = (event.loaded / event.total) * 100;
                console.log(`上传进度: ${percentComplete.toFixed(2)}%`);
            }
        };
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log('上传成功:', JSON.parse(xhr.responseText));
            } else {
                console.error('上传失败:', xhr.statusText);
            }
        };
        xhr.onerror = function() {
            console.error('上传失败:', xhr.statusText);
        };
        const formData = new FormData();
        formData.append('file', file);
        xhr.send(formData);
    }
}

问题2：文件大小限制

原因：服务器端没有设置文件大小的限制，或者前端没有进行初步的文件大小检查。

解决方法：在后端设置文件大小限制，并在前端进行检查。

// 后端（Node.js）
const upload = multer({
    dest: 'uploads/',
    limits: { fileSize: 5 * 1024 * 1024 } // 限制文件大小为5MB
});

// 前端
function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    if (file && file.size <= 5 * 1024 * 1024) { // 检查文件大小
        // 上传逻辑...
    } else {
        alert('文件大小超过限制！');
    }
}

通过上述方法，可以有效实现异步HTTP文件上传，并处理常见的上传问题。