Vue でファイル アップロードを実装するための完全なガイド (axios、element-ui)

<template>
  <div class="upload-form">
    <el-upload :action="serverUrl" :on-success="uploadSuccess" :headers="headers"
               :before-upload="beforeUpload" :on-error="uploadError">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="upload-tip">只能上传jpg/png文件，且不超过2MB</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data () {
    return {
      serverUrl: '/api/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  methods: {
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    uploadSuccess (response) {
      console.log(response.data)
      this.$message.success('头像上传成功!')
    },
    uploadError (error) {
      console.log(error)
      this.$message.error('上传头像图片失败!')
    }
  }
}
</script>

<style scoped>
.upload-form {
  margin-top: 20px;
  text-align: center;
}
.upload-tip {
  margin-top: 10px;
  color: #999;
}
</style>

<template>
  <!-- 这里插入上一部分的代码 -->
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      serverUrl: '/api/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  methods: {
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    uploadSuccess (response) {
      console.log(response.data)
      this.$message.success('头像上传成功!')
    },
    uploadError (error) {
      console.log(error)
      this.$message.error('上传头像图片失败!')
    },
    uploadFile (file) {
      const formdata = new FormData()
      formdata.append('file', file)
      axios.post(this.serverUrl, formdata, {
        headers: this.headers
      }).then((response) => {
        this.uploadSuccess(response)
      }).catch((error) => {
        this.uploadError(error)
      })
    }
  }
}
</script>

<style scoped>
  <!-- 这里插入上一部分的代码 -->
</style>

<template>
  <div>
    <NavigationBar /> <!-- 插入导航栏组件代码 -->
    <UploadForm /> <!-- 插入上传表单组件代码 -->
  </div>
</template>

<script>
import NavigationBar from './components/NavigationBar.vue'
import UploadForm from './components/UploadForm.vue'

export default {
  components: {
    NavigationBar,
    UploadForm
  }
}
</script>

const express = require('express')
const bodyParser = require('body-parser')
const multer  = require('multer')
const app = express()

const upload = multer({ dest: 'uploads/' })

app.use(bodyParser.json())
app.use(bodyParser.urlencoded())

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  res.status(200).json({
    success: true,
    message: 'File uploaded successfully!'
  })
})

app.listen(3000, () => {
  console.log('Server listening on port 3000')
})