今天头脑一热就想做一个 图片上传的功能 刚好也学到了 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.测试
让我们来选择一张图片上传
最后也确实 收到了 图片 好了 图片上传算是完成了 算是一个小的项目实战了