前端上传图片到七牛云空间

效果

• 可以做到异步上传
• 实现每个文件的上传进度
• 主要是读写速度快

1、后端先创建token接口

• 这里用的express

• node.js SDK

先安装qiniu模块

npm install qiniu -D

创建qiniu.js，获取token

qiniu.js

/**
 * 七牛
 */ 
import qiniu from "qiniu";
const AK =  '你的AccessKey'//在个人中心内
const SK = '你的SecretKey'
const bucket = 'look-for'//空间名称
//鉴权对象mac
const mac = new qiniu.auth.digest.Mac(AK, SK)
//获取上传的token
const options = {
  scope: bucket,
  expires: 3600 * 24 //到期时间
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)//这是我们获取到的token，后端用接口传到前端，这里就不描述了

export default uploadToken

2、前端传图片到七牛云空间

• 拿到刚刚服务器获取的uploadToken
• 通过uploadToken进行上传!
• javascript-SDK
• github (建议看这个)

npm i qiniu-js -D //安装qiniu sdk

这是fileList, file对象，我用的是vant组件

代码

import * as qiniu from 'qiniu-js'
const fileList = [...] //这里是前端拿到的文件对象的list,结构如上图
const uploadToken = 'xxx'//拿到刚刚服务器获取的`uploadToken`(接口获取)
fileList.forEach(i=>{
  //七牛信息
  const qiniuUploadInfo = {
    file: i.file, //文件对象
    key: i.file.name, //文件资源名称
    token: uploadToken, //从后端获取的uplodaToken
  }
  const putExtra = {
    fname: i.file.name, // 文件原文件名
    params: {}, // 用来放置自定义变量
    mimeType: null // 用来限制上传文件类型，为 null 时表示不对文件类型限制；eg: ["image/png", 	  "image/jpeg"]
  }
  const config = {
    useCdnDomain: true,//cdn加速
    region: qiniu.region.z2 //区域
  }
  const observable = qiniu.upload(
      qiniuUploadInfo.file,
      qiniuUploadInfo.key,
      qiniuUploadInfo.token,
      putExtra,
      config
  )
  //上传开始
  observable.subscribe({
    next(res){
      console.log('next', res)
    },
    error(err){
      console.log('err', err)
    },
    complete(res){//来到这里就是上传成功了。。
      console.log('complete', res)
    }
  })
})