express 上传图片

前端界面

upload

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

<el-upload
    class="avatar-uploader"
    :action="imgAction"
    :show-file-list="false"
    :on-success="afterUpload">
    <img v-if="model.icon" :src="model.icon" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

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

<el-table-column prop="icon" label="图标">
  <template slot-scope="scope">
    <img :src="scope.row.icon" alt="图标" style="height:3rem">
  </template>
</el-table-column>

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