js实现图片上传到服务器和回显

首先，需要了解图片上传到服务器和回显的基本过程：

前端通过<input type="file">标签选择文件并上传到服务器；
服务器将文件存储到指定目录下，并返回图片在服务器的存储路径；
前端通过获取服务器返回的图片路径，并将其作为<img>标签的src属性值，即可实现图片的回显。

接下来，我们将分步骤讲解如何通过JS实现图片上传到服务器和回显。

1. HTML结构

为了实现图片上传，我们需要在HTML中添加如下代码：

<!-- input标签用于选择文件，form标签用于发送post请求 -->
<form enctype="multipart/form-data">
  <input type="file" name="file" id="uploadInput">
  <button type="submit" id="uploadButton">上传</button>
</form>
<!-- 图片回显区域 -->
<div id="preview"></div>

其中，enctype="multipart/form-data"属性告诉浏览器以表单形式上传文件，<input>标签的name属性与后台处理文件时的字段名相对应。

2. JS代码

实现图片上传

在JS代码中，我们需要通过监听<form>标签的submit事件实现图片上传功能。具体代码如下：

function uploadFile() {
  // 获取input标签和button标签
  const inputElement = document.querySelector('#uploadInput');
  const buttonElement = document.querySelector('#uploadButton');
  // 监听submit事件并阻止默认行为
  document.querySelector('form').addEventListener('submit', e => {
    e.preventDefault();
    // 获取上传的文件对象
    const file = inputElement.files[0];
    // 创建FormData对象，并将文件对象以"file"字段名上传到后端
    const formData = new FormData();
    formData.append('file', file);
    // 发送post请求到后端
    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => {
        console.log(response.text());
    })
    .catch(error => {
        console.error(error);
    });
  });
}

在其中，FormData对象用于实现表单数据的序列化，具有以下特性：

可以通过append()方法添加字段与值；
可以通过entries()方法获取表单数据的迭代器；
可以直接作为 Fetch 请求的 body 属性传递。

其中，fetch方法用于发送POST请求，catch用于捕获异常并输出错误信息。

实现图片回显

上传完成后，我们需要通过JS代码将图片从服务器中获取并在前端页面中显示。下面分别介绍通过XMLHttpRequest和Fetch API实现图片回显的方法：

使用XMLHttpRequest

function displayImage() {
  // 获取服务器返回的图片地址
  const imageUrl = '/image.png';
  // 创建XMLHttpRequest对象
  const xhr = new XMLHttpRequest();
  // 监听xhr对象的load事件
  xhr.addEventListener('load', () => {
    if (xhr.status === 200) {
      const blob = new Blob([xhr.response], { type: 'image/png' });
      const objectURL = URL.createObjectURL(blob);
      // 创建img标签并设置src属性
      const img = document.createElement('img');
      img.src = objectURL;
      // 将img标签添加到画面上
      const preview = document.querySelector('#preview');
      preview.appendChild(img);
    }
  });
  // 发送get请求
  xhr.open('GET', imageUrl);
  xhr.responseType = 'arraybuffer';
  xhr.send();
}

使用Fetch API

function displayImage() {
  // 获取服务器返回的图片地址
  const imageUrl = '/image.png';
  // 发起Fetch请求并获取response
  fetch(imageUrl)
    .then(response => {
      return response.arrayBuffer();
    })
    .then(buffer => {
      // 用Blob对象包装数据并创建objectURL
      const blob = new Blob([buffer], { type: 'image/png' });
      const objectURL = URL.createObjectURL(blob);
      // 创建img标签并设置src属性
      const img = document.createElement('img');
      img.src = objectURL;
      // 将img标签添加到画面上
      const preview = document.querySelector('#preview');
      preview.appendChild(img);
    })
    .catch(error => {
      console.error(error);
    });
}

上述代码中，我们使用XMLHttpRequest和Fetch API分别获取服务器返回的图片数据。URL.createObjectURL()方法用于创建一个指向存储在Blob中数据的URL。最后，我们创建一个<img>标签并将该URL作为其src属性的值，即可将获取到的图片数据显示在页面上。

示例说明

示例1：使用jQuery实现文件上传和图片回显

如果你使用jQuery框架开发前端项目，你可以使用$.ajax方法实现文件上传和图片回显功能。具体代码如下：

function uploadImage() {
  // 绑定上传按钮的click事件
  $('#uploadButton').click(function(event) {
    event.preventDefault();
    // 获取表单数据
    const formData = new FormData($('form')[0]);
    // 发送POST请求
    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      success: function(url) {
        // 上传成功后，将图片回显在页面上
        displayImage(url);
      }
    });
  });
}

function displayImage(url) {
  // 获取图片路径，并创建img标签
  const img = document.createElement('img');
  img.src = url;
  // 将img标签添加到画面上
  const preview = document.querySelector('#preview');
  preview.appendChild(img);
}

示例2：使用Express实现文件上传和图片回显

在Node.js应用中，我们可以通过Express框架实现文件上传和图片回显功能。具体代码如下：

const express = require('express');
const app = express();
const multer = require('multer');

// 设置静态资源目录，允许访问uploads文件夹中的图片文件
app.use(express.static('public'));

// 配置multer中间件，用于解析上传的文件
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/uploads/')
  },
  filename: function (req, file, cb) {
    const ext = file.originalname.split('.').pop();
    cb(null, `${Date.now()}.${ext}`);
  }
});
const upload = multer({ storage });

// 处理文件上传的请求
app.post('/upload', upload.single('file'), (req, res) => {
  // 返回图片在服务器上的路径
  res.send(`/uploads/${req.file.filename}`);
});

// 处理获取图片的请求
app.get('/image', (req, res) => {
  const imageUrl = `./public/uploads/${req.query.filename}`;
  res.sendFile(imageUrl);
});

// 启动web服务
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

其中，multer中间件用于解析上传的文件，upload.single('file')表示上传的文件对应的字段名为file。处理文件上传请求后，我们将图片的服务器存储路径作为响应内容返回给前端，即可实现图片回显的功能。

以上就是JS实现图片上传到服务器和回显的攻略过程，希望能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现图片上传到服务器和回显 - Python技术站