前端和nodejs实现前后端图片上传功能

前端图片上传   input type="file"

1、form表单上传图片 ，需要设置 enctyped的第二个属性值 multipart/form-data

2、js中拿到input标签的files

$("input").click(function(){

$(this).files; //数组
$(this).files.length //判断长度是否上传
let file = $(this).files[0]; //上传对象信息
file.name //利用正则表达式判断后缀名是否是图片
/.(jpg|png|JPG|PNG|gif|webp|jpeg)$/.test(file.name) //利用正则表达式判断后缀名是否是图片
let src= window.URL.createObjectURL(file) //获取上传图片路径
file.size<= 2048000 //图片大小必须小于 2MB
})

后端接收前端上传的图片文件

1、下载模块 cnpm install --save multer

2、在路由文件中引入模块const multer = require('multer')

2.1、设置图片上传的文件夹：

const upload = multer({ dest: 路径 })；路径：path.join(__dirname,'../public/images/')

3、在接收路由中加入中间件  upload.single('传图片的name名')

router.post('/tupian',upload.single('file'),function(req,res){
req.file 是‘ file ’文件的信息
console.log( req.file );

let oldurl = req.file.path 老地址
let newurl =req.file.destination+req.file.originalname； 新地址
fs.rename( oldurl ,newurl , function(err,){} ) //改图片文件名

})

4、接收完成后，重命名图片文件，利用fs模块中的重命名 fs.rename( 图片老地址 ,图片新地址 , 回调函数 )

4.1、通过改变图片地址来改变文件名

ajax中的axios模块上传图片(图片上传，多图上传)

1、js中拿到input上传标签的files，

inputDOM元素.files; //数组

2、拿到图片的二进制数据：

let  file =inputDOM元素.files[0];

3、利用FormData()新建一个formData变量：

const formData = new FormData();

4、将上传文件的二进制数据（file）添加到FormData对象中

formData.append('avatar', file);

5、如果有多张图片，就将图片的二进制数据file存入List数组中：

let List = [file1,file2,图片3....]

6、遍历当前临时文件List,将上传文件添加到FormData对象中

注意：这里的avatar与后端接收图片的file插件 upload.single('avatar')，的值对应！

List.forEach( item => formData.append('avatar', item); )

7、axios的ajax发送，将FormData以及图片二进制数据请求头传给封装的post请求：

注意：这里的this指向Vue实例，Vue原型上挂载了axios的post请求！

this.$post("/api/v1/upload",formData,{ 'content-type': 'multipart/form-data' })
.then(data=>{
    // console.log(data);
    this.url = data.data.url;
   })

8、封装的axios的post请求文件：

export const post = (url, data,headers, container) => {
​
 let loading = createLoading(container);
​
 return new Promise((resolve, reject) => {
​
  axios.post(url, data,{headers}).then(response => {
​
   resolve(response)
​
   setTimeout(() => {
​
   loading.close();
​
   }, 1000)
​
  }).catch(error => {
​
   console.error(error, 'POST api/index.js')
​
   setTimeout(() => {
​
    loading.close();
​
   }, 1000)
​
   reject('网络溜走啦～～');
​
  });
​
 })
​
}

9、后端封装返回图片路径的方法

// 接收上传的图片，返回url地址
​
router.post('/imgUrl', upload.single('avatar'), (req, res, next) => {
​
 let file = req.file;
​
 if (file) {
​
  let oldName = file.path;
​
  let newName = file.destination + file.originalname;
​
  fs.renameSync(oldName, newName)
​
  let url = "http://localhost:3000/img/" + file.originalname;
​
  res.send({
​
   code: 200,
​
   url
​
  })
​
 } else {
​
  res.send({
​
   code: 400,
​
   message: '未接收图片'
​
  })
​
 }
​
})
​

​这样就可以实现多图上传和单图上传了