nodejs写接口实现图片上传回显(三)

1. 过程简介

(1)页面用formData上传图片文件
(2)接口配置multer中间件,解析存储图片文件
(3)接口返回图片地址,回显

2. 代码

2.1 前端文件上传

//结构
<div class="imgUpload">
      <div class="input">
        <input type="file" accept=".jpg,.png" ref="uploadBox" v-show="false" @change="imgChange">
      </div>
      <div style="display: flex;align-items: center;width: 100%;">
        <div style="margin-right: 20px;">
          <el-button type="primary" size="mini" @click="imgSend">上传</el-button>
        </div>
        <div>
          <img src="" alt="">
        </div>
      </div>
    </div>

//js
    // 图片上传
    imgSend () {
      this.$refs.uploadBox.click()
    },
    // 选择要上传的图片更替
    imgChange () {
      const target = this.$refs.uploadBox.files[0]
      const formDate = new FormData()

      formDate.append('image', target)
      interfaces.sendImg(formDate).then(res => {
        console.log(res, '图片上传结果')
        //回显
        document.querySelector('img').src = res.data.url
      }).catch(err => {
        console.log(err, '图片上传错误')
      })
    },

2.2 接口

2.2.1 multer中间件配置

const multer = require('multer'); // 用于处理文件上传
const path = require('path');//获取当前地址模块

app.use('/imgUploads', express.static(path.join(__dirname, 'imgUploads')));// 设置静态文件目录

// 配置 multer 中间件来处理文件上传
const storage = multer.diskStorage({
    // 设置图片存储的位置
    destination: (req, file, cb) => {cb(null, './imgUploads');},
    // 设置图片的名字
    filename: (req, file, cb) => {cb(null, file.originalname);},
});

const upload = multer({ storage });

//post 图片上传
app.post('/imgUpload', upload.single('image'), (request, response) => {
    const data = {
        message: '图片上传成功!',
        //图片的地址
    	url:`http://192.168.158.156:9000/imgUploads/${request.file.filename}` 
    }
    const visitorIP = request.headers['x-forwarded-for'] || request.connection.remoteAddress;
    console.log(data, '获取的请求参数');
    console.log(visitorIP, '请求者的地址');
    response.status(200).send(data)
})

2.2.2 上传到指定文件夹

2.3 图片回显