vue + node 实现图片下载功能,服务端图片转base64
程序员文章站
2022-05-26 22:30:33
...
vue :
重点是创建a标签,指向服务端传回来的base64数据(或者图片网络地址)
// 下载
downImg() {
this.axios.post("resumes/downImg", {
name: "截图1",
headers: { "content-type": "multipart/form-data" }
}).then(res=>{
if(res.data.status=="0"){
// 下载功能
var a = document.createElement("a")
a.download = "截图1"
// 设置地址
a.href = res.data.msg
a.click()
}
}).catch(err=>{
})
}
node:
//下载接口
router.post('/downImg', function (req, res, next) {
let name = req.body.name
// dir 为要获取的文件夹
let dir = "./public/images"
// readdirSync返回一个包含指定目录下的所有文件,如:
// ['homeList1.png','homeList2.png',...,'截图1.jpg]
let pa = fs.readdirSync(dir)
// 找到图片匹配图片的方法
function dirEach(){
pa.forEach((item,index)=>{
// 如果匹配到指定文件名
if(item.split(".")[0] == name){
// path.resolve将以/开始的路径片段作为根目录,
// 在此之前的路径将会被丢弃,就像是在terminal中使用cd命令一样。获得在计算机上的绝对路径,如:
// F:\myproject\zhimi\node-zhimi\public\images\截图1.jpg
let itemPath = path.resolve(dir+"/"+item);
// 使用 fs.statSync(fullPath).isDirectory() 来判断是否是文件目录,如果是,递归,找到下一级的图片
let stat = fs.statSync(itemPath)
if(stat.isDirectory()){
dirEach(itemPath)
}else{
parse(itemPath)
}
}
})
}
// 将图片转换为base64的方法
function parse(filePath){
let filenameList = filePath.split("\\").slice(-1)[0].split('.')
let fileName = filenameList[0]
// fs.readFileSync同步读取文件,<Buffer ff d8 ff e0 00 10...>
let data = fs.readFileSync(filePath);
// buffer对象转换成指定的字符编码的字符串
data = new Buffer(data).toString("base64")
let base64 = "data:"+mimeType.lookup(filePath)+";base64,"+data
if(base64){
res.json({
status:"0",
msg:base64,
fileName:fileName
})
}
}
dirEach()
});
public文件夹:
推荐阅读
-
vue项目base64字符串转图片的实现代码
-
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
-
Vue实现base64编码图片间的切换功能
-
vue.js图片转Base64上传图片并预览的实现方法
-
vue项目base64字符串转图片的实现代码
-
vue + node 实现图片下载功能,服务端图片转base64
-
vue项目中如何实现保存头像以及base64字符串转图片的功能
-
vue项目中如何实现保存头像以及base64字符串转图片的功能
-
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
-
Vue实现base64编码图片间的切换功能