express 上传图片

前端界面

upload

使用elment-ui的upload组件,action是上传图片的网址，上传成功后执行afterUpload方法

computed: {
  imgAction () {
    rerurn this.$http.defaults.baseURL + '/upload'
  }
},
methods: {
  afterUpload (res) {
    // res 是 element 的on-success附带参数
    // 数据赋值会有问题，需要显式赋值
    // this.model.icon = res.url; // 获取后台生成的url，赋值给model.icon
    this.$set(this.model, 'icon', res.url); // vue推荐用法
  }
}

显示

el-table-column里的template

node端

multer

在路由文件中导入multer，并建立中间件

const multer = require('multer');
// 这里使用绝对地址
const upload = multer({ dest: __dirname + '/../../uploads' });

将中间件加入路由,single代表单次上传，file传入子路由
app.post('admin/api/upload', upload.single('file'), async (req, res) => {
  const file = req.file;
  file.url = `http://localhost:3000/uploads/${file.filename}`;
  res.send(file);
});

静态文件托管

在入口文件中设置托管

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

效果

image.png

image.png