欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 + node 实现图片下载功能,服务端图片转base64

相关标签: 资料 js vue