node实现图片上传至oss

描述：

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;否则大图片是无法传输成功的。

本文地址：https://blog.csdn.net/GreyBearChao/article/details/107485965