Nodejs 上传图片并预览

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

jsaxios_2">原生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...')
})

前端

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

<form>
    <input type="file" name="img">
    <button>上传</button>
</form>
<img src="" alt="" height="300px">

引入axios

<script src="node_modules/axios/dist/axios.min.js"></script>

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

<script>
    document.querySelector('form').onsubmit = async function (e) {
        e.preventDefault()

        let data = new FormData()
        data.append('file',document.querySelector('input').files[0])

        const res = await axios.post('http://localhost:3000/upload', data)
        console.log(res)

        document.querySelector('img').setAttribute('src', res.data.url)
    }
</script>

Vue+ElementUI

node端

同上。

效果

在这里插入图片描述

前端

 <el-form-item label="图标">
                <el-upload
                        class="avatar-uploader"

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


             :action="$http.defaults.baseURL + '/upload'"
             :show-file-list="false"
             :on-success="uploadSuccsss"
             :before-upload="beforeAvatarUpload">
         <img v-if="model.avatar" :src="model.avatar" class="avatar">
         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
 </el-form-item>

你可以自己调整上传文件的大小限制和类型，官网的例子大小和类型我都给改了。
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)
            }