vue + node 實現圖片下載功能,服務端圖片轉base64

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章