自定义上传图片（自定义上传input样式）

灰太狼 2022-12-20 03:11 108阅读 0赞

## 1.Html文件
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        img {
          width: 100px;
          height: 100px;
        }
    
        .btn {
          position: relative;
          display: inline-block;
          width: 75px;
          height: 25px;
          overflow: hidden;
          line-height: 25px;
          text-align: center;
          vertical-align: middle;
          background-color: #f90;
          border: 1px solid #f90;
          border-radius: 5px;
          font-size: 14px;
          color: #fff;
        }
    
        .btn:hover {
          background-color: rgba(255, 153, 0, 0.822);
          border: 1px solid rgba(255, 153, 0, 0.822);
        }
    
        .btn input {
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
        }
      </style>
    </head>
    
    <body>
      <img src="" alt="">
      <div class="customUpload">
        <label class="btn">
          <span>选择图片</span>
          <input type="file">
        </label>
      </div>
      <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
      <script>
        const input = document.querySelector('input')
        input.onchange = async function (e) {
          const files = e.target.files[0]
          const name = files.name
          const res = await upload({ name, files })
          const url = res.data.url
          getImgUrl(url)
        }
    
    
        function upload({ name, files }) {
          const formData = new FormData()
          formData.append('name', name)
          formData.append('file', files)
          return axios({
            method: 'POST',
            url: 'http://localhost:3000/upload',
            data: formData
          })
        }
    
        function getImgUrl(src) {
          const img = document.querySelector('img')
          img.src = src
        }
      </script>
    </body>
    
    </html>

## 2. 服务端代码 server.js中
    const express = require('express')
    const cors = require('cors')
    const multer = require('multer')
    const uploadRouter = require('./routers')
    const path = require('path')
    const storage = multer.diskStorage({
      // 输出的目录
      destination (req, file, cb) {
        cb(null, 'uploads/')
      },
      // 文件名重写,因为默认multer生成的文件是没有扩展名的
      filename (req, file, cb) {
        cb(null, Date.now() + file.originalname)
      }
    })
    // 自定义控制
    const upload = multer({ storage })
    
    const app = express()
    // 暴露静态资源
    app.use(express.static(path.resolve(__dirname, './uploads')))
    // 解决跨域
    app.use(cors())
    
    // 应用中间件
    app.use(upload.any(), uploadRouter)
    
    
    // 监听的端口
    app.listen(3000, err => {
      if (err) {
        console.log(err)
        return
      }
      console.log('success')
    })

## 3. routers/index.js
    const express = require('express')
    const upload = require('./upload')
    const router = express.Router()
    
    router.post('/upload', upload)
    module.exports = router

## 4. routers/upload.js
    module.exports = function (req, res) {
      const filename = req.files[0].filename
      const url = 'http://localhost:3000/' + filename
      res.send({
        status: 200,
        url
      })
    }

## 5. 新建一个uploads空目录即可