需求： 点击上传图片按钮，选择图片以后，不请求后端接口，直接将图片展示在缩略图中。
解决方案： 使用 FileReader 和 FileReader 中的 readAsDataURL 方法。
第一步
从input[type=“file”] (上传文件标签) 里面拿到file数据，类似下图
第二步
拿到file数据后，执行下面代码
// file 是文件数据
// 读取文件
var reader = new FileReader();
// base64位读取
reader.readAsDataURL(file);
reader.onload = function (e) {
// 给img标签src复制（结果是base64图片）
img_src = e.target.result;
}
效果展示：文章来源：https://www.toymoban.com/news/detail-609870.html
选择前
选择图片
选择后
文章来源地址https://www.toymoban.com/news/detail-609870.html
到了这里，关于前端JS 展示上传图片缩略图（本地图片读取）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
