前端部分

html部分

    <div class="add">
        <p>商品名称： <input type="text" class="productName"></p>
        <p>商品价格： <input type="number" class="price" ></p>
        <!-- multiple: 允许同时上传多张图片 -->
        <!-- <p>商品图片： <input type="file" class="file" multiple="multiple"></p> -->
        <p>商品图片： <input type="file" class="file"></p>
        <p><button class="add-btn">添加商品</button></p>
    </div>
    <script src="js/axios.js"></script>
    <script src="js/util.js"></script>
    <script src="js/upload.js"></script>

upload.js

// 新建表单数据对象，用来存储上传的文件及上传的其它数据
let param = new FormData()

$(".file").onchange = function(){
    //获取图片信息
    let file = this.files[0]
    //"file"为前后端约定vb的属性名
    param.append("file",file)
}
$(".add-btn").onclick = function(){
    let productName = $(".productName").value;
    let price = $(".price").value;
    param.append("productName",productName)
    param.append("price",price)

    axios.post("/product",param,{
        headers: {
            // 默认提交的类型
            // "content-type": "application/json"
            // 复杂的表单数据(只要上传文件，就必须是下面的类型)
            "content-type": "multipart/form-data"
        }
    })
    .then((res)=>{
        console.log(res.data);
    })
}

Express后端部分

使用multer实现图片上传

下载

npm i multer -S

引入

const multer = require("multer")

配置

注意： 该文件在/router文件夹中，而uploads文件夹在根目录

var storage = multer.diskStorage({
    // 配置文件上传后存储的路径
    destination: function (req, file, cb) {
        // NodeJS的两个全局变量
        // console.log(__dirname);  //获取当前文件在服务器上的完整目录 
        // console.log(__filename); //获取当前文件在服务器上的完整路径 
        cb(null, path.join(__dirname,'../uploads'))
    },
    // 配置文件上传后存储的路径和文件名
    filename: function (req, file, cb) {
        console.log('file',file);
        cb(null, Date.now() + path.extname(file.originalname))
    }
})
var upload = multer({ storage: storage })

在路由中使用

//添加商品

//"file"为前端传过来的存储上传文件的属性名
router.post("/product",upload.single("file"),(req,res)=>{
    //接收普通文本参数
    let {productName,price} = req.body;

    //接收上传文件数据
    let imgUrl = req.file.filename;
    let sql = "insert into product (productName,price,imgUrl) values (?,?,?)"
    conn.query(sql,[productName, price , imgUrl],(err,result)=>{
        if (err){
            console.log('增加失败');
            return;
        }
        let data;
        if (result.affectedRows === 1){
            data = {
                code: 0,
                msg: '添加成功'
            }
        }else{
            data = {
                code: 1,
                msg: '添加失败'
            }
        }
        res.send(data)
    })
})