上传(图片)文件的功能实现

说句实话,现在的开发简单多了。因为有现成的第三方的上传文件的代码。如果放在我们以前做开发,上传文件的代码都得自己写。

那现在的程序员面对上传文件的功能到底写啥代码。

1)、对于前端人员:就是把后端的请求地址,请求方式,要传的文件对象(选择的文件)写好。

2)、对于后端人员:只需要把接收的文件做重命名,修改位置,图片地址保存的数据库,再把图片地址响应给前端就行。

你看看,是不是上传文件是怎么上传的核心部分我们根本不用去关注。

话不多说,上干货,本文后端使用nodeJS,第三方模块使用multer。

示例:注册功能的上传头像。

1、前端选择文件并发送请求 -> 后端接收到文件本身 -> 保存到服务器(硬盘)上 —>对文件进行重命名,并加上扩展名,—>把路径响应给前端—->前端把路径放在img标签的src属性

2、注册时,把前端拿到图片路径要发给后端,后端保存到数据库中。

一、前端代码:

<!DOCTYPE html>
<html lang="en"><head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>注册页面</title>
</head><body>
   <div>
       <h1>注册页面</h1>
       <img id="selectfile" src="./images/defaultHeader.png" style="width: 100px; height: 100px;">
       <input id="inputfile" type="file" style="display: none;">
       <p>
           手机号:
           *<input type="text" id="userphone">
           <span id="phoneMsg"></span>
       </p>
       <p>
           密码:
           <input type="text" id="userpass" placeholder="长度6-16位,由数字,字母,下划线">
           <span id="passMsg"></span>
       </p>
       <p>
           确认密码:
           <input type="password" id="userpass2">
           <span id="pass2Msg"></span>
       </p>
       <p>
           <input type="button" value="注册" id="btnRegister">
           <span id="errMsg"></span>
       </p>
   </div>
</body></html>
<script src="./js/jquery.js"></script>
<script>
​
   let headerPath = "";
​
   window.onload = function () {
       // 点击图片,调用 input type=file 标签的click事件
       $("#selectfile").on("click", function () {
           document.getElementById("inputfile").click();//触发onclick事件。
       })
​
       // onChange事件:当选择的文件发生变化时触发
       document.getElementById("inputfile").onchange = function () {
           console.log("选择了新的文件");
           // 上传图片
           var formData = new FormData();
           // 通过formData定义参数格式。
           // formData.append("参数名",参数值)
           formData.append('photo', document.getElementById('inputfile').files[0]);
​
           // $.ajax() 是jQuery封装好的ajax函数。
           $.ajax({
               url: "/uploadajax",
               type: "post",
               data: formData,
               contentType: false,
               processData: false,
               success: function (res) {
                   console.log("后端响应的内容",res);
                   console.log("res.path",res.path);
                   document.getElementById("selectfile").src=res.path;
                   headerPath = res.path
               }
           });
       };
  
       // 注册按钮
       document.getElementById("btnRegister").onclick = register;
       
       function register() {
           //为了减少篇幅,省去了注册功能的代码    
       }
   }
​
</script>

二、后端代码:

1、用express搭建项目(用express脚手架)

express -e 项目名

2、安装第三方模块:multer:

npm i multer@1.4.5-lts.1 --save

我用的版本:”multer”: “^1.4.5-lts.1”

3、在app.js文件里。增加代码: 1)、引入模块:

let multer  = require('multer');

2)、实例化并安装中间件

//2 实例化  
let objMulter = multer({ dest: './public/upload' }); //dest: 指定 保存位置(存到服务器),这个根据实际情况可以修改。//安装中间件, 
app.use(objMulter.any());  //允许上传什么类型文件,any 代表任何类型  

项目只有运行后,会自动在你的项目里,产生一个目录 public/upload,以后上传的文件都在此目录保存。

3)、写后端接口。

以我的项目为例。

3.1)、在routes下创建文件 uploadajax.js,写上如下代码:

var express = require("express");
const fs = require("fs");
var router = express.Router();
​
router.post("/", function (req, res, next) {
 // multer对req对象做了扩展,增加了files属性,files属性里保存着上传文件的相关信息。
 // 如下:
 // fieldname:表单的name,其实就前端的参数名。 
   console.log("req.files[0].fieldname", req.files[0].fieldname);// photo
​
   const fileObj = req.files[0];
   let filename = (new Date()).getTime();//时间戳,毫秒数。
   let newPath = fileObj.destination+'/header'+filename+".jpg";
   //1、重命名文件
   fs.renameSync(fileObj.path,newPath);
   //2、给前端响应图片存储的路径。前端放在img标签的src属性上,就可以显示图片了。
   res.json({
       code:"200",
       path:`./upload`+'/header'+filename+".jpg"
   });
});module.exports = router;

3.2)、在app.js里,引入 uploadajax.js,并写上接口的地址。

var uploadajaxRouter = require("./routes/uploadajax");
​
​
………………
​
​
app.use("/uploadajax",uploadajaxRouter);

原文链接:https://juejin.cn/post/7337207433867460635 作者:田江

(0)
上一篇 2024年2月20日 上午10:10
下一篇 2024年2月20日 上午10:21

相关推荐

发表评论

登录后才能评论