上传文件前后端实现

ezyk_cn 项目-上传文件前后端实现.

时间：2021.5.25

前端部分，主要的上传方式有三种 1.form 表单提交 2.formdata 提交

form 表单提交

通常的代码格式是这样的

<form name="form名称" action="请求地址"  method="请求类型" enctype ="multipart/form-data">
    <input type="file" name="">
    <input type="text" name="">
    <input type="submit" value="提交">
</form>

formdata 提交（axios 实现）

这是在现代的项目中，比较主流的方式。axios 通常采用 post 进行文件上传，也可写作 axios.post(url, file)的形式。

header 中的 Content-Type 需要设置为 ‘multipart/form-data’

<template>
  <div>
    <input ref="input" type="file" accept="image/png, image/jpeg" @change="handle_change" />
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    layout: 'blog',
    mounted() {},
    methods: {
      /**
       * @name 处理变更
       * @param {Object} ev 事件
       */
      handle_change(ev) {
        let formData = new FormData()
        let file = ev.target.files[0]
        formData.append('file', file)
        axios({
          method: 'post',
          url: 'http://127.0.0.1:9003/api/uploadImage',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(function (res) {
          console.log('上传成功', res)
        })
      }
    }
  }
</script>

服务端实现

multer 是 express 官方的文件处理中间件，提供 multer 的处理，可以将 file 发送到指定的目录路径，同时，会将文件写入到 req.files 里去。

/*
 * @Author: Yang Kang
 * @Date: 2021-05-06 15:22:01
 * @LastEditors: Yang Kang
 * @LastEditTime: 2021-05-25 11:08:25
 */

const express = require('express')
const router = express.Router()
const multer = require('multer')
const md5 = require('md5-node')
// var upload = multer({ dest: './public/img' }).any()
let storage = multer.diskStorage({
  destination: function (req, file, cb) {
    //    指定文件存放路径
    cb(null, './assets/mood/imgs')
  },
  filename: function (req, file, cb) {
    // 指定文件名,先获取扩展,随机生成文件名保存给保存文件的方法
    //获取文件扩展名
    let exts = file.originalname.split('.')
    let ext = exts[exts.length - 1] //为了防止上传图片时,图片的名称中含多个点,从后面取最后一个解决问题
    let tmpname = Date.now() + parseInt(Math.random() * 9999) //时间戳+随机数生成文件名
    // tmpname = md5(tmpname)
    cb(null, `${md5(tmpname)}.${ext}`)
  }
})
let upload = multer({ storage: storage })
//单个文件上传
router.post('/uploadImage', upload.any(), (req, res) => {
  console.log(req.files)
  let file = req.files?.[0]
  res.json({
    code: '0000',
    type: 'single',
    originalname: file.originalname,
    path: file.path
  })
})

export default router

如图，结果成功上传了

原文链接
上传文件前后端实现