本文共 2054 字，大约阅读时间需要 6 分钟。

本文分两个部分，第一部分为nodejs+express和前端原生js+axios，第二部分为实际应用Vue+elementUI和node+express中配置。

原生js+axios实现

效果：

node端：

const express = require('express')

• 上传文件所需的模块

const multer = require('multer')

const app = express()

• 这里是你上传的路径，__dirname是一个全局变量，表示你当前文件所在的绝对路径，拼接一个你想存放上传文件的路径即可

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

• 处理跨域问题

app.use(require('cors')())

• 这里要开放一下uploads文件夹，因为要实现预览功能的话，还要用到里面的图片。

app.use('/uploads', express.static(__dirname + '/uploads'))

• 配置一个中间件，upload.single('file')小括号里面的file可以随意起名，但是一定要和前端发来的数据名称一致，看到前端部分你就知道怎么回事了。

app.post('/upload', upload.single('file'), async (req, res) => {
       const file = req.file

• 给file添加一个url属性，传给前端之后，就把这个url赋值给图片的src

file.url = `http://localhost:3000/uploads/${
     file.filename}`    res.send(file)})app.listen(3000, () => {
       console.log('Start Up...')})

前端

• 一个带有文件上传的表单。

   
    
        
    上传
   

• 引入axios

• 在表单提交的时候拦截提交，创建一个表单数据对象FormData，在其中添加的数据，其key值一定要和node端的upload.single('file')小括号中名称一致。
• 这里用到的 async和await，理解和详细用法

Vue+ElementUI

node端

同上。

效果

前端

• :action中的$http是自己封装的axios对象，或者你可以写死上传路径。
• :on-success="uploadSuccsss"上传成功之后的回调。
• :before-upload="beforeAvatarUpload"上传前做的一些工作，如验证文件类型，文件大小。

:action="$http.defaults.baseURL + '/upload'"             :show-file-list="false"             :on-success="uploadSuccsss"             :before-upload="beforeAvatarUpload">                        

• 你可以自己调整上传文件的大小限制和类型，官网的例子大小和类型我都给改了。
• this.$set()，大致意思就是让响应式的赋值，让Vue 能够监听到这个值发生变化了。这段时间有空的话会写一篇博客说说，没空就留坑吧。大家先可以百度一下。

beforeAvatarUpload(file) {
                   const isJPG = file.type === 'image/jpeg' || 'image/png';                const isLt2M = file.size / 1024 / 1024 < 8;                if (!isJPG) {
                       this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');                }                if (!isLt2M) {
                       this.$message.error('上传头像图片大小不能超过 8MB!');                }                return isJPG && isLt2M;            },            uploadSuccsss(res) {
                   this.$set(this.model, 'avatar', res.url)            }

结语

码字不易，如果对你有帮助的话，请给一个赞吧

转载地址：http://ueozi.baihongyu.com/