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

最新推荐文章于 2023-06-30 11:41:09 发布

原创最新推荐文章于 2023-06-30 11:41:09 发布 · 514 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #javascript #vue.js #html #node.js

## 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空目录即可