node实现图片上传至oss

素颜马尾好姑娘i 2023-02-28 11:27 17阅读 0赞

描述：

1.  前端使用 input="file 上传图片。
2.  后端实现图片上传接口，图片上传至 oss 并将上传的 url 返回给前端。

// node 实现
    let OSS = require('ali-oss')
    let client = new OSS({  // 连接OSS实例
      region: '',
      accessKeyId: '',
      accessKeySecret: '',
      bucket: '',
    });
    
    // 实现上传的 upload 接口
    // 图片以 base64 的方式传输
    app.post('/upload', async (req, res) => { 
      try { 
        const filename = `${ Date.now()}${ req.body.name}`
        const catalog = `/images/${ filename}`
        /* 此处的catalog指的是上传的文件存储在当前Bucket或Bucket下的指定目录 */
        let result = await client.put(catalog, Buffer.from(req.body.file, 'base64'));
        res.send({ 
          result
        })
      } catch (e) { 
        res.send({ 
          result: false,
          errMsg: e
        })
      }
    })

<input type="file" accept="image/*" id="upload" @change="upload(event)">
    
    <script> function upload (e) { var file = e.target.files[0] if(file){ var name = e.target.files[0].name var reader = new FileReader(); reader.onload = function (event) { var base64 = event.target.result var base64Data = base64.replace(/^data:image\/\w+;base64,/, '') console.log('base64Data', base64Data) axios.post('/upload', { name, file: base64Data }).then(res => { console.log('url', res.data.result.url) }) }; reader.readAsDataURL(file); // 将 Blob 或 File 对象转成base64 } } </script>

注意事项：

1.上传的base64数据需要手动剔除前缀。  
2.node 中 body-parser 中运行传输的数据大小为 100kb,因此需要修改配置保证大数据也能传输。

app.use(bodyParser.json({ 
      limit : '100000kb'
    }))

3.如果有用到nginx，需要修改nginx.conf中的 client\_max\_body\_size 20m;否则大图片是无法传输成功的。