H5读取文件并上传到服务器的方法

H5读取文件并上传到服务器的方法步骤如下：

Step1：创建一个表单input元素

<input type="file" id="fileInput" />

Step2：监听input元素的onchange事件

document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);

Step3：定义事件处理函数handleFileSelect，利用FileReader对象读取文件内容并执行上传操作

function handleFileSelect(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    var content = e.target.result;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    xhr.send(JSON.stringify({filename: file.name, content: content}));
  }
  reader.readAsDataURL(file);
}

说明：

1.通过evt.target.files[0]获取input元素的文件对象；

2.利用FileReader对象的readAsDataURL方法读取文件内容，获取base64编码后的字符串；

3.利用XMLHttpRequest对象执行POST请求，将文件名和内容以JSON格式上传到服务器。

Step4：在服务器端接收文件并保存

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const fs = require('fs');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.post('/upload', function(req, res) {
  const filename = req.body.filename;
  const content = req.body.content;
  const destPath = __dirname + '/uploads/' + filename;
  const base64Data = content.replace(/^data:image\/\w+;base64,/, "");
  const buffer = Buffer.from(base64Data, 'base64');
  fs.writeFile(destPath, buffer, function(err) {
      if (err) {
        console.log(err);
        res.status(500).send('File upload failed');
      } else {
        console.log('File saved successfully');
        res.status(200).send('File saved successfully');
      }
  });
});

app.listen(3000, function () {
  console.log('Server listening on port 3000');
});

说明：

1.使用body-parser中间件解析请求体；

2.在路由'/upload'中获取请求体的filename和content字段；

3.计算文件保存路径，将base64编码后的字符串转成Buffer对象，执行fs.writeFile方法保存文件；

4.在文件保存成功或失败时，分别向客户端返回相应的响应信息。

综上所述，以上就是H5读取文件并上传到服务器的方法，希望能对大家有所帮助。