[前端]第二节、upload上传图片

1、

<el-upload

          class="avatar-uploader"

          :action="$http.defaults.baseURL+'/upload""

          :headers="getAuthHeaders()"

          :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>

//afterUpload(res)中的res就是图片上传的完的地址

2、后端接口

    //上传图片接口

    const multer = require("multer");

//接收图片路径

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

//设置接口允许接收图片

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

    const file = req.file

    file.url = `http://localhost:3000/uploads/${file.filename}`

    res.send(file)

   })

//server->index.js

//托管静态文件夹，让里面的文件可以通过upload访问

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