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文件夾: