正文

掌握JS上传文件流：高效文件传输与跨域解决方案全解析

/0 浏览量
0326

引言

随着互联网技术的不断发展，文件上传已成为Web应用中不可或缺的功能。JavaScript（JS）作为前端开发的主要语言之一，在文件上传方面扮演着重要角色。本文将深入解析如何使用JS进行高效文件传输，并探讨跨域上传的解决方案。

文件上传的基本原理

1. HTML5 File API

HTML5引入了File API，允许JavaScript访问和操作用户上传的文件。通过File API，我们可以获取文件的类型、大小、名称等信息。

<input type="file" id="fileInput" />
<script>
  const fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    console.log('文件名:', file.name);
    console.log('文件大小:', file.size);
    console.log('文件类型:', file.type);
  });
</script>

2. AJAX上传

使用AJAX上传文件是当前主流的上传方式。通过XMLHttpRequest对象，我们可以异步上传文件，而无需刷新页面。

<input type="file" id="fileInput" />
<script>
  const fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log('文件上传成功');
      } else {
        console.log('文件上传失败');
      }
    };
    xhr.send(formData);
  });
</script>

高效文件传输

1. 分片上传

对于大文件上传，我们可以采用分片上传的方式，将文件分割成多个小片段，分别上传，提高上传效率。

function uploadChunk(file, start, end, callback) {
  const chunk = file.slice(start, end);
  const formData = new FormData();
  formData.append('file', chunk);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(null, xhr.responseText);
    } else {
      callback(new Error('上传失败'));
    }
  };
  xhr.send(formData);
}

function uploadFile(file) {
  const chunkSize = 1024 * 1024; // 分片大小1MB
  const totalChunks = Math.ceil(file.size / chunkSize);
  let currentChunk = 0;

  function nextChunk() {
    const start = currentChunk * chunkSize;
    const end = Math.min(file.size, start + chunkSize);
    uploadChunk(file, start, end, function(err, response) {
      if (err) {
        console.error(err);
        return;
      }
      currentChunk++;
      if (currentChunk < totalChunks) {
        nextChunk();
      } else {
        console.log('文件上传成功');
      }
    });
  }

  nextChunk();
}

2. 断点续传

断点续传是指在上传过程中，如果因网络等原因导致上传中断，可以从中断的地方继续上传。

function uploadChunk(file, start, end, callback) {
  const chunk = file.slice(start, end);
  const formData = new FormData();
  formData.append('file', chunk);
  formData.append('start', start);
  formData.append('end', end);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(null, xhr.responseText);
    } else {
      callback(new Error('上传失败'));
    }
  };
  xhr.send(formData);
}

function uploadFile(file) {
  const chunkSize = 1024 * 1024; // 分片大小1MB
  const totalChunks = Math.ceil(file.size / chunkSize);
  let currentChunk = 0;
  let uploadedChunks = new Array(totalChunks).fill(false);

  function nextChunk() {
    const start = currentChunk * chunkSize;
    const end = Math.min(file.size, start + chunkSize);
    uploadChunk(file, start, end, function(err, response) {
      if (err) {
        console.error(err);
        return;
      }
      uploadedChunks[currentChunk] = true;
      currentChunk++;
      if (currentChunk < totalChunks) {
        nextChunk();
      } else {
        console.log('文件上传成功');
      }
    });
  }

  nextChunk();
}

跨域解决方案

1. CORS

CORS（跨源资源共享）是一种允许服务器向不同源发送资源的策略。通过设置CORS头部，我们可以允许或拒绝跨域请求。

// 服务器端
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

2. JSONP

JSONP（JSON with Padding）是一种利用<script>标签无跨域限制的特性来实现跨域请求的方法。

// 服务器端
app.get('/data', (req, res) => {
  const data = { message: 'Hello, world!' };
  res.send(`${req.query.callback}(${JSON.stringify(data)})`);
});

// 客户端
const callback = 'handleResponse';
function handleResponse(data) {
  console.log(data.message);
}
const script = document.createElement('script');
script.src = `/data?callback=${callback}`;
document.body.appendChild(script);

3. Web代理

Web代理是一种将请求转发到目标服务器的技术，可以实现跨域请求。

// 服务器端
app.get('/proxy', (req, res) => {
  const options = {
    url: 'https://target-server.com/data',
    method: 'GET',
  };
  request(options, (err, response, body) => {
    if (err) {
      console.error(err);
      return;
    }
    res.send(body);
  });
});

// 客户端
const proxyUrl = 'https://your-server.com/proxy';
const targetUrl = 'https://target-server.com/data';
const url = `${proxyUrl}?url=${encodeURIComponent(targetUrl)}`;
fetch(url).then(response => response.text()).then(data => console.log(data));

总结

本文详细解析了使用JS进行高效文件传输的方法，并探讨了跨域解决方案。通过分片上传、断点续传等技术，我们可以提高文件上传的效率。同时，通过CORS、JSONP、Web代理等技术，我们可以实现跨域请求。希望本文能帮助您更好地掌握JS上传文件流。

-- 展开阅读全文 --