资讯专栏INFORMATION COLUMN

一步一步搭建一个图片上传网站(后台服务器用nodejs)

Darkgel / 1597人阅读

摘要:把文件上传路径指定到然后用当前日期和文件名命名上传过来的文件。后端利用建立服务器,利用中间件指定文件路径。利用这个前端和后端技术,我们基本上就可以做出一个图片上传存储的基本网站核心。

</>复制代码

  1. 前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试。也没有具体的一个实例都是一些基本的原理片段,并且ui界面也不好看,我就准备给那篇文章作为补充做一个图片上传网站。
    效果如图:


点击上传后,会把文件放到后台一个uploads文件夹下面,如果上传成功,那么页面会 弹出一个上传成功的提示框,如果上传失败,会弹出一个失败的提示框,如果网速比较慢,会显示出上传过程中的进度条。

开发准备 用普通的表单提交方法实现文件上传。

1.编写前端代码

</>复制代码

设置action为提交地址,enctype="multipart/form-data"

设置提交文件表单域名为imgfile

2.编写后端测试用代码

这里我们采用了express框架,需要先安装这个框架,然后使用静态中间件指定放置我们js css html 文件的目录

</>复制代码

  1. var app = express();
  2. app.use(express.static("dist"))

下载处理上传文件的插件multer
在readme.md文件中有基本的使用方法,我们复制过来代码实例稍微改改就可以使用了。把文件上传路径指定到uploads,然后用当前日期和文件名命名上传过来的文件。这个imgfile域名必须严格和前端表单文件域名对应起来。

完整代码如下:

</>复制代码

  1. "use strict";
  2. exports.__esModule = true;
  3. var express = require("express");
  4. var multer = require("multer");
  5. var storage = multer.diskStorage({
  6. destination: function(req, file, cb) {
  7. cb(null, "./uploads");
  8. },
  9. filename: function(req, file, cb) {
  10. cb(null, `${Date.now()}-${file.originalname}`)
  11. }
  12. })
  13. var upload = multer({ storage: storage });
  14. var app = express();
  15. app.use(express.static("dist"));
  16. //var cpUpload = upload.fields([{ name: "imgfile", maxCount: 12 }])
  17. app.post("/uploadimg", upload.array("imgfile", 40), function(req, res, next) {
  18. var files = req.files
  19. console.log(files)
  20. if (!files[0]) {
  21. res.send("error");
  22. } else {
  23. res.send("success");
  24. }
  25. console.log(files);
  26. })
  27. var server = app.listen(9999, "localhost", function() {
  28. console.log("server is running at port 9999...");
  29. });

这样选择文件,点击提交按钮后文件就被上传到了服务器uploads文件夹下

用H5和ajax技术实现无刷新文件上传

1.改造原来的选择文件按钮,让它变成一个可爱的小图标,点击后选择文件。
这个过于简单就不放代码了,具体思路是把一个a标签放上背景图片,把上传文件input type="file"大小设置成a标签一样大,并且放置到a标签上面,opacity设置成0透明的。点击a实际上是点击了input type="file"
2.选取文件后生成缩略图,这个基本思路是监听input type="file"的onchange事件,如果选了文件就利用FileReader生成一个图片data:url添加到div.preview里面动态生成的img上,给div.preview设置成flex布局就可以灵活放置预览图了。
html

</>复制代码

js

</>复制代码

  1. fileinput.onchange = () => {
  2. //console.log("ffffdd")
  3. var files = fileinput.files
  4. let imgDOMArray = new Array(files.length)
  5. let reader = []
  6. let thumbPic = []
  7. progressDOM = document.getElementById("progress-img")
  8. for (let i = 0; i < files.length; i++) {
  9. reader[i] = new FileReader()
  10. thumbPic[i] = document.createElement("div")
  11. imgDOMArray[i] = document.createElement("img")
  12. imgDOMArray[i].file = files[i]
  13. thumbPic[i].className = "thumbPic"
  14. thumbPic[i].appendChild(imgDOMArray[i])
  15. previewDOM.appendChild(thumbPic[i])
  16. reader[i].readAsDataURL(files[i])
  17. reader[i].onload = (img => {
  18. return e =>img.src = e.target.result
  19. })(imgDOMArray[i])
  20. }
  21. }

3.点击上传按钮上传图片
这个基本思路就是利用Formdata模拟表单,然后用ajax发送文件到服务器

</>复制代码

  1. var aUpload = document.querySelector(".selectImg")
  2. var button = document.querySelector("#upload")
  3. var fileinput = document.getElementById("file")
  4. button.onclick = uploadFile
  5. function uploadFile() {
  6. // console.log("ffffd")
  7. var xhr = new XMLHttpRequest()
  8. var formdata = new FormData()
  9. var files = fileinput.files
  10. if (!files[0]) {
  11. alert("请先选择图片,再上传!")
  12. return
  13. }
  14. var progress = document.querySelector("progress")
  15. for (let i = 0; i < files.length; i++) {
  16. formdata.append("imgfile", files[i], files[i].name)
  17. }
  18. xhr.open("POST", "/uploadimg")
  19. xhr.onload = () => {
  20. if (xhr.status === 200 && xhr.responseText === "success") {
  21. previewDOM.innerHTML = ""
  22. xhr = null
  23. alert("图片上传成功!")
  24. }
  25. }
  26. xhr.send(formdata)
  27. xhr.upload.onprogress = e => {
  28. if (e.lengthComputable) {
  29. var progressWrap = document.querySelector(".progress")
  30. progressWrap.style.display = "flex"
  31. var percentComplete = e.loaded / e.total * 100
  32. progress.value = percentComplete
  33. if (percentComplete >= 100) {
  34. progress.value = 0
  35. progressWrap.style.display = "none"
  36. }
  37. }
  38. }
  39. }

其中利用了xhr.upload.onprogress监听数据上传事件,并且动态设置h5进度条的value显示上传进度。如果上传完成,隐藏进度条。
如果服务器返回的是success,就弹出上传图片成功。否则弹出上传图片失败。

总结
前端利用了FileReader 的readAsDataUrl显示缩略图,利用H5 progress标签和监听xhr.upload.onprogress显示进度条。利用FormData模拟表单数据,用ajax技术提交到服务器。
后端利用express建立服务器,利用static中间件指定js css html 文件路径。用multer模块实现了解析存储通过input typle="file"提交的数据。
利用这个前端ajax和后端nodejs技术,我们基本上就可以做出一个图片上传存储的基本网站核心。如果数据量比较大我们就可以采用数据库存储索引搜索,不过这已经跟前端没啥关系就不展开讲了。

获取代码

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82874.html

相关文章

  • 2016年总结--成长

    摘要:马尔代夫之行重头戏这一年的工作情况这一年,个人感觉还是做了不少事情,主要集中在我们公司的前端领域,同时也给整个技术团队不少的建议,引入了不少新的东西和方式,总结起来比较重要的在下面五个方面。 如果想看技术相关的,下拉到后面的重头戏就是了。 一个活动页面 在15年末的时候,加入到罗辑思维,刚过来就接手了一个微信朋友圈要传播的活动页面,效果页面大概和当时锤子手机的活动页面漂亮的不像实力派类...

    niuxiaowei111 评论0 收藏0
  • 我的全站https之路

    摘要:网站是自己个人的网站,后台用的服务器用的阿里云的操作系统是。证书证书用的阿里云的云盾证书因为自己服务器就在阿里云,当然最大的原因还是免费。七牛云的图片资源,改后请求不了。 文章地址 背景 很早前就想着升级https,总觉得会很难自己想用nginx但是也没用过不会弄就一直拖着,前两天突然决定搞一下,没想到一天多时间就搞完了,所以人还是要多尝试,有这个想法还没搞的人要赶快动起来啦。这里记录...

    nifhlheimr 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<