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

node实现图片上传至oss

程序员文章站 2022-06-28 19:14:43
描述:前端使用 input="file 上传图片。后端实现图片上传接口,图片上传至 oss 并将上传的 url 返回给前端。// node 实现let OSS = require('ali-oss')let client = new OSS({ // 连接OSS实例 region: '', accessKeyId: '', accessKeySecret: '', bucket: '',});// 实现上传的 upload 接口// 图片以 base64 的方式传输a...

描述:

  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

相关标签: node