技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-9.图片上传

1.根据文章模块实现流程制作出技能模块

SkillSet.vue:

<template>
    <div>
        <h1>{{id ? '编辑' : '创建'}}技能</h1>
        <el-form label-width="80px" style="margin-top:20px;" @submit.native.prevent="save">
            <el-form-item label="所属分类">
                <el-select v-model="model.categories" multiple>
                    <el-option v-for="item in categories" :key="item._id" :label="item.name" :value="item._id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="技能名称">
                <el-input v-model="model.name"></el-input>
            </el-form-item>
            <el-form-item label="技能介绍">
                <el-input v-model="model.introduce"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    props: {
        id: {}
    },
    data(){
        return {
            model: {},
            categories: [],
        }
    },
    methods: {
        async save(){
            let res
            if(this.id){
                res = await this.$http.put('rest/skills/' + this.id, this.model)
            }else{
                res = await this.$http.post('rest/skills', this.model)
            }
            console.log("en?",res)
            this.$router.push('/skills/list')
            this.$message({
                type: 'success',
                message: '保存成功'
            })
        },
        async fetch(){
            const res = await this.$http.get('rest/skills/' + this.id)
            this.model = res.data
        },
        async fetchCategories(){
            const res = await this.$http.get('rest/categories')
            this.categories = res.data
        }
    },
    created(){
        this.id && this.fetch()
        this.fetchCategories()
    }
}
</script>

SkillList.vue:

<template>
    <div>
        <h1>技能列表</h1>
        <el-table :data="items">
            <el-table-column prop="_id" label="ID" width="220">
            </el-table-column>
            <!-- <el-table-column prop="categories[0].name,categories[1].name" label="所属分类">
                <template slot-scope="scope"> {{scope.row.categories[0].name}},{{scope.row.categories[1].name}} </template>
            </el-table-column> -->
            <el-table-column prop="name" label="文章标题">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="$router.push('/skills/edit/' + scope.row._id)">编辑</el-button>
                    <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            items: []
        }
    },
    methods: {
        async fetch(){
            const res = await this.$http.get('rest/skills')
            this.items = res.data
        },
        remove(row){
            this.$confirm('是否确定要删除文章"' + row.name + '"?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 要想使用await，函数必须使用async
                // await异步执行，待调用接口获取数据完成后再将值传给res，进行下一步操作
                const res = await this.$http.delete('rest/skills/' + row._id)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                if(res.status == 200){
                    // 接口调用成功后，刷新页面
                    this.fetch()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    created() {
        this.fetch()
    }
}
</script>

2.使用elementUI放入图片上传组件

在技能介绍放置修改后的图片上传模块：

<el-form-item label="图标上传">
    <!-- 动态获取接口地址，所以action加冒号 -->
    <el-upload
        class="avatar-uploader"
        :action="$http.defaults.baseURL + '/upload'"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="model.icon" :src="model.icon" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>

下方引入效果样式style:

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

在methods中添加图片的上传之前和成功之后两个事件：

// 图片上传成功之后
handleAvatarSuccess(res) {
    console.log(res)
},
// 图片上传之前的验证
beforeAvatarUpload(file) {
    console.log(file)
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif' ;
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
    this.$message.error('上传格式必须为常用图片格式，如png,jpg,gif等');
    }
    if (!isLt2M) {
    this.$message.error('上传图标图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
}

测试，现在没有编写upload接口，binary表示二进制文件，file是图片数据名：

3.编写上传接口upload

server/routes/admin/index.js:
上传图片接口不属于之前做的通用CRUD接口rest，在最下方另开一个app.post用于新建图片上传接口地址。

由于express不能获取到文件上传的数据，所以我们要使用获取文件数据的类包multer，定义在中间件中使用：

cd server

npm i multer

使用multer，并定义中间件：

// 引入获取文件数据的multer包
const multer = require('multer')
// 定义中间件upload
// dest目标地址,__dirname表示当前文件,要以当前文件为准找到我们想要把图片保存到的文件夹,
// 我把uploads文件夹新建到了server/uploads
const upload = multer({dest: __dirname + '/../../uploads'})
// 图片上传接口
// file是前台传入调用图片上传接口upload时formdata里边的数据名
app.post('/admin/api/upload', upload.single('file'), async(req, res) => {

})

完善图片上传接口：

app.post('/admin/api/upload', upload.single('file'), async(req, res) => {
    // 使用中间件后,multer将数据赋值到req中,否则req不能调取file
    const file = req.file
    res.send(file)
})

此时，上传图片就可以把图片文件保存到指定的uploads文件夹中了，测试：


图片上传成功，没问题。

4.将文件路径返回给前台数据。

看一下接口成功后的信息，这些信息就是利用multer将值传到req的file数据：

其中filename就是我们保存下来文件的文件名，所以我们要访问到图片的话，就要通过接口地址再加上这个filename，也就是给图片添加路由地址。因为在我们学习路由的时候就发现，在node.js中与其他后端不同，这里的文件地址都是由我们自己定义的，而不是真实路由，这也就是node.js路由的弊端吧。
（1）在server端index.js定义路由，找到uploads文件夹的静态真实地址，定义路由地址

（2）定义图片的路由地址，将路由地址放入准备输出的file中，从而方便前台调用查询

再测试一下，查看url能否正常生成：

没问题。

打印出的res也没问题.
（3）把url在前端页面显示

再次进行测试：

没问题。检查一下数据的绑定：

也没问题。
（4）完善保存按钮接口
由于我们使用了通用CRUD接口，所以只完善skill模型即可，将绑定的数据在server/models/Skill.js都定义好字段和类型。

const mongoose = require('mongoose')

const schema = new mongoose.Schema({
    name: { type: String },
    categories: [{ type: mongoose.SchemaTypes.ObjectId, ref: 'Category' }],
    introduce: { type: String },
    icon: { type: String },
})

module.exports = mongoose.model('Skill', schema)

测试：


没问题。
（5）技能列表页面显示图标。
同样使用elsmentUI中的效果，发现一个有意思的：

改动技能列表SkillList.vue:

<el-table-column prop="name" label="技能名称" width="120">
    <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
            <img :src="scope.row.icon" width="140">
            <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
        </el-popover>
    </template>
</el-table-column>