前端显示file格式的图片

你可以通过使用`<input type="file">`标签来选择图片文件，然后使用JavaScript来读取图片文件并将其显示在前端页面上。具体步骤如下：

1. 在HTML中添加一个`<input type="file">`标签，用于选择图片文件：

<input type="file" id="imgFile">

2. 在JavaScript中获取所选择的图片文件，并将其读取为DataURL格式：

var fileInput = document.getElementById('imgFile');
var file = fileInput.files[0]; // 获取选择的文件
var reader = new FileReader(); // 创建FileReader对象
reader.readAsDataURL(file); // 读取文件为DataURL格式
reader.onload = function () {
  var imgDataUrl = reader.result; // 获取读取的DataURL
  // 在页面上显示图片
  var imgElement = document.createElement('img');
  imgElement.src = imgDataUrl;
  document.body.appendChild(imgElement);
}

3. 将DataURL格式的图片数据赋值给`<img>`标签的`src`属性，从而在页面上显示图片。

以上就是将file格式的图片显示在前端页面的基本步骤。