node存储element-ui上传的图片

Posted 2021-12-02 hj412

说明

• element-ui的Upload组件可以帮助我们上传我们的图片到我们的服务器，可以使用action参数上传图片，也可以使用http-request自定义上传方式。这里我们使用自定义的方式上传。

前端代码

• 我们只是自定义了一个 upload方法，里面进行发送我们的请求,使用了FormData对象，它将数据编译成键值对，其主要用于发送表单数据。

<template>
 <div id="app">
   <h3>头像上传</h3>
   <el-upload
     class="avatar-uploader"
     action="http://localhost:3003/upLoad"
     :show-file-list="false"
     :http-request="upload"
   >
     <img v-if="imageUrl" :src="imageUrl" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
   </el-upload>
 </div>
</template>
<script>
  methods:{
    upload(f){

      let formData = new FormData()
      formData.append('file', f.file)

      axios({
        method: 'post',
        url: 'http://localhost:3003/upLoad',
        data:formData
      }).then(res =>{
           //上传成功之后 显示图片
          this.imageUrl = res.data.url
      })
    }
  }
</script>

后台代码

• node + express

 //app文件
 const express = require('express')
 const app = express()

 //解决跨域
 app.all('*',function (req, res, next) {
     res.header('Access-Control-Allow-Origin', '*');
     res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
     res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
     if (req.method == 'OPTIONS') {
         res.send(200);
     }else {
         next();
     }
 });

 //引入router.js路由文件
 const router = require('./router/router.js')

 //暴漏静态资源文件 暴漏之后我们可以通过域名访问该文件下的资源
 app.use(express.static('upload'))

 app.use(router)

 app.listen(3003, function(){
     console.log('已经创建好服务器，可以连接了...')
 })

• router文件
  • 这里使用了multer中文文档中间件，处理我们上传的图片，storage配置了图片的存储路径，以及文件名和后缀名。在路由 upLoad中使用 upload.single(‘file‘) 获得我们存储的信息，这里的file与FormData的 键 一致。之后返回服务器存储图片的地址返回给客户端即可。

 //router.js文件
 const express = require('express')
 const router = express.Router()
 const multer = require('multer')
 
 //上传的文件保存在 upload
 const storage = multer.diskStorage({
     //存储的位置
     destination(req, file, cb){
         cb(null, 'upload/')
     },
     //文件名字的确定 multer默认帮我们取一个没有扩展名的文件名，因此需要我们自己定义
     filename(req, file, cb){
         cb(null, Date.now() + file.originalname)
     }
 })

 //传入storage 除了这个参数我们还可以传入dest等参数
 const upload = multer({storage})
 router.post('/upLoad', upload.single('file'), (req, res) =>{
    
    //给客户端返回图片的访问地址 域名 + 文件名字 
    //因为在 app.js文件里面我们已经向外暴漏了存储图片的文件夹 uploa
     const url = 'http://localhost:3003/' + req.file.filename
     res.json({url})
 })