文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何利用原生JS实现图片预览加上传(前后端交互)

2024-04-02 19:55

关注

前言

最近在写vue项目的时候发现了个Vant的一个upload的图片上传的组件,就好奇了一下下,于是萌生了一个自己手写一个图片上传的组件的想法,您猜怎么着,还真给我实现了,那今天就和大家分享一下,大家有兴趣的可以了解一下啦,写进项目中可能会是个加分点哦!!

我们知道文件上传是需要前后端交互的,所以我这边给出前后端代码。 文件上传大致分为以下几个步骤

效果大致如下

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.button{
margin-right: 20px;
}
#preview {
display: flex;
flex-wrap: wrap;
width: 1500px;
padding: 0 10px;
justify-content: start;
}
.icon-po {
overflow: hidden;
position: relative;
width: 300px;
height: 300px;
margin-right: 20px;
margin-top: 20px;
}
.icon-close {
position: absolute;
right: 5%;
top: 5%;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
color: #fff;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.pic{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
选择文件(允许多文件):
<input type="file" id="f1" multiple> //multiple开启多选
<button type="button" class="button" id="btn-submit">预览图片</button>
<button type="button" id="complate">上传图片</button>
<div id="preview"></div>
<br />
<script>
let e = 0
let fd = new FormData() //文件传输一定要使用ForData对象
let fL = []
function submitUpload() {
let fileList = document.getElementById('f1').files
for (let i = 0; i < fileList.length; i++) {
fL.push(fileList[i])
}
//渲染出图片
//FileReader 读取文件的方式为readAsDataURL时会触发
function readAndPreview(file) {
// 确保 `file.name` 符合我们要求的扩展名
if (/\.(jpe?g|png|gif|mp4)$/i.test(file.name)) {
//FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件
//(或原始数据缓冲区)的内容
//这里是读取到input返回出来的fileList中文件
var reader = new FileReader();
//该事件在FileReader对象读取操作完成时触发
reader.addEventListener("load", function () {
//创建出两个div 一个用做父容器 一个做删除按钮
var div1 = document.createElement('div');
var div2 = document.createElement('div');
//创建一个Image Dom 用来做渲染图片
var dom = new Image() //当然要是想渲染视频的话就创建一个video标签就好啦
//给创建的Dom添加类名用于设计样式
div1.className = 'icon-po'
div2.className = 'icon-close'
div2.innerHTML = 'X'
dom.className = 'pic
//给生成的每个图片盒子添加index属性
div1.index = div2.index = e
e++
//给删除按钮添加上点击事件
div2.onclick = (e) => {
console.log(e.target.index)
div1.remove()
fL.splice(e.target.index, 1, "")
console.log(fL);
}
//设置img的样式
dom.width = 300;
dom.height = 300;
dom.title = file.name;
//该 result属性包含作为数据的数据: URL将文件的数据表示为 base64 编码的字符串。
dom.src = this.result;
//将创建出的dom添加进对应的dom中去
div1.appendChild(dom)
div1.appendChild(div2)
preview.appendChild(div1);
}, false);
//调用readAsDataURL()方法拿到result
reader.readAsDataURL(file);
}
}
//拿到input中的fileList中的文件对象进行渲染出图片
if (fileList) {
[].forEach.call(fileList, readAndPreview);
}
if (!fileList.length) {
alert('请选择文件')
return
}
}

function complate() {
//筛选出未删除的文件
fL.forEach(async (item) => {
if (typeof item === "string") {
console.log(item);
} else {
fd.append('files', item)//将没有别删除的文件加入到FormData对象中
}
})
//向后端发送请求
let xhr = new XMLHttpRequest()
xhr.open('POST', 'http://localhost:3007/', true)
xhr.send(fd)
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let obj = JSON.parse(xhr.responseText)
console.log(obj);
}
}
}
document.getElementById('btn-submit').addEventListener('click', submitUpload)
document.getElementById('complate').addEventListener('click', complate)
</script>
</body>
</html>

后端代码


var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');
var fs = require('fs');
var Koa = require('koa2');
var cors = require('koa2-cors') //解决跨域

var app = new Koa();
var port = process.env.PORT || '3007';
var uploadHost = `http://localhost:3001/uploads/`;
app.use(cors())
app.use(koaBody({
  //koa-body 是一个可以帮助解析 http 中 body 的部分的中间件,包括 json、表单、文本、文件等。
  formidable: {
    //设置文件的默认保存目录,不设置则保存在系统临时目录下  
    uploadDir: path.resolve(__dirname, './static')
  },
  multipart: true // 支持文件上传
}));
app.use(koaStatic(
  //让我们更加快速访问服务中的静态资源
  path.resolve(__dirname, './static')
));
//二次处理文件,修改名称
app.use((ctx) => {
  console.log(ctx.request.files);
  var files = ctx.request.files.files;//得到上传文件的数组
  var result = [];
  console.log(files);
  let baseUrl = 'http://192.168.10.4:3007/'
  if (!Array.isArray(files)) {//单文件上传容错
    files = [files];
  }
  files && files.forEach(item => {
    var path = item.path.replace(/\\/g, '/');
    var fname = item.name;//原文件名称
    var nextPath = path + fname;
    if (item.size > 0 && path) {
      //得到扩展名
      var extArr = fname.split('.');
      var ext = extArr[extArr.length - 1];
      var nextPath = path + '.' + ext;
      //重命名文件
      fs.renameSync(path, nextPath);
      console.log(baseUrl + nextPath.slice(nextPath.lastIndexOf('/') + 1))
      result.push(baseUrl + nextPath.slice(nextPath.lastIndexOf('/') + 1));
    }
  });
  ctx.body = {//向前端返回图片上传后的地址
         "fileUrl":`${JSON.stringify(result)}`
     };
})

app.listen(port, () => {
  console.log('服务已启动3007');
})

总结

代码我都做好详细注释啦,使用到的官方对象的作用我也给你总结出来了给你们偷个懒!!相信大家花点时间看一下就能懂啦,最后我再叨叨几句~

到此这篇关于如何利用原生JS实现图片预览加上传的文章就介绍到这了,更多相关JS实现图片预览上传内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯