vue、nodejs上传图片

演示

演示.gif

技术栈

• 前端：Vue
• 后端：nodejs、express、multer

本地端口

• 前端：8080
• nodejs：3000
• nginx：3001

前端部分

axios.js

import axios from "axios";
const instance = axios.create();
axios.defaults.withCredentials = true;
//请求拦截器
instance.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
//响应拦截器
instance.interceptors.response.use(
    response => {
        return Promise.resolve(response.data);
    },
    error => {
        return Promise.reject(error);
    }
);
export default {
    //上传图片
    uploadImg: data => {
        return instance.post("//localhost:3000/upload", data);
    }
};

流程：

1. 通过input的onchange事件获取到本地图片文件。
2. 调用接口传输FormData格式的图片文件。
3. 拿到接口返回的服务器图片地址进行预览。

后端部分

const express = require('express')
const upload = require("../lib/upload");
const app = express();

// .single(fieldname)
// 接受一个以 fieldname 命名的文件。这个文件的信息保存在 req.file。
app.post('/upload', upload.single("imgFile"), function (req, res, next) {
    res.json({
        code: 200,
        data: "/" + req.file.filename,
        msg: "success"
    });
})

/lib/upload.js

const multer = require("multer");

const upload = multer({
    storage: multer.diskStorage({
        destination: "/uploads", //本地保存的目录(E:\uploads)
        filename: function(req, file, cb) {
            //保存的文件名
            cb(null, file.fieldname + "-" + Date.now() + "-" + file.originalname);
        }
    }),
    //限制上传大小5M和同时上传的数量
    limits: {
        fileSize: 1024 * 1024 * 5,
        files: 5
    },
    //依据mime文件类型过滤
    fileFilter: function(req, file, cb) {
        const allowArr = ["image/jpeg", "image/gif", "image/png"];
        if (allowArr.indexOf(file.mimetype) > -1) {
            cb(null, true);
        } else {
            cb(new Error("文件类型不正确"));
        }
    }
});

module.exports = upload;

当前端调用"/upload"，在multer中间件，我们自定义了保存的目录、文件名，同时限制了大小、数量和文件类型。

最后返回给前端的数据data中，是一个自定义后的文件名。

为了让前端访问到保存后的文件，使用了nginx做代理。

Nginx代理

nginx.conf

server {
    listen       3001;
    server_name  localhost;
    location / {
        root   E:\uploads;
    }
}

代理的端口是3001，目录是我们自定义的保存目录"E:\uploads"。

这样前端标签的src设置为"localhost:3001+图片名"，就可以显示图片了。

后会有期。