uniapp 上传图片到本地node.js服务器

今天头脑一热就想做一个 图片上传的功能  刚好也学到了 uniapp的图片上传 

也可以把之前的node.js 知识复习下 虽然中间碰见了点问题 但还是很流畅解决 用了五六分钟

好了 和往常一样  废话不多BB直接上代码

1.搭建 uniapp 客户端上传代码   （注意 我这个是运行的本地 h5端的  谷歌手机模拟器）

<button @click="img">上传图片</button>

界面就很简单 就一个按钮

2.选择图片 添加一个方法

img:function(){
                uni.chooseImage({         //选择图片
                    count:1,
                    sizeType:["compressed"],
                    success(res) {
                        var imgsFile=res.tempFilePaths[0];  //获取图片的临时资源
                        uni.uploadFile({     //上传代码
                            url:"http://localhost:8088/users/upload", //本地node.js服务器地址
                            filePath:imgsFile,
                            name:"file",    //这个东西有点类似与 form表单中的  name值 在后面也需要这个
                            success:function(res){
                                console.log(res);
                            }
                        })
                    }
                })
            }

3.那前台准备好了 就是node后台了

这里我偷懒了 直接使用了 node.js的脚手架  (脚手架不知怎么建立 我前面的博客 有说过 ：

https://blog.csdn.net/yunchong_zhao/article/details/102718102)

再上传之前  还是要准备一下环境的比如 跨域问题肯定要碰见的 

因为 我们的 uniapp 监视着一个端口  node.js又监视一个端口  俩者之间肯定涉及跨域问题

https://blog.csdn.net/yunchong_zhao/article/details/104003709   //这里有快速解决跨域的问题

4.node.js脚手架和跨域问题解决好了之后 就是 各种辅助插件的安装

npm install fs  --save //node.js  文件操作模块  写入文件需要

npm install path --save  // 地址拼接需要

npm install multer  --save  // 文件上传模块 这个是必须的

在你创建好的node.js脚手架中   在routers 文件下 的 user.js文件中书写代码

const path=require("path");          //导入path模块
const multer=require("multer");     //导入multer模块
const fs=require('fs');   //导入文件操作模块
//设置临时目录 存放上传的图片
const upload=multer({dest:"tmp/"});

// 接受客户端上传的图片
router.post("/upload",upload.single("file"),(req,res)=>{
    let imgFile=req.file;//获取图片上传的资源
    var tmp=imgFile.path;//获取临时资源
    let ext=path.extname(imgFile.originalname);//利用path模块获取 用户上传图片的 后缀名
    let newName=""+(new Date().getTime())+Math.round(Math.random()*10000)+ext;  //给用户上传的图片重新命名 防止重名
    let newPath="../public/images/"+newName; //给图片设置存放目录  提前给当前文件夹下建立一个   images文件夹  ！！！！
    let fileData=fs.readFileSync(tmp);//将上传到服务器上的临时资源 读取到 一个变量里面
    fs.writeFileSync(path.join(__dirname,newPath),fileData);//重新书写图片文件  写入到指定的文件夹下
    res.send("写入图片成功!");//上传成功之后  给客户端响应
})

这里有一个小坑就是 ： node.js 地址拼接 一定要  path.join() 

5.测试

让我们来选择一张图片上传

最后也确实 收到了 图片 好了 图片上传算是完成了  算是一个小的项目实战了