前端浏览器设置js上传图片到七牛云

NO.1
JavaScript SDK

官方文档:https://developer.qiniu.com/kodo/1283/javascript

安装依赖

yarn add qiniu-js

引入

import * as qiniu from 'qiniu-js'

sdk的使用

参数

  • file:要上传的文件,类型为file
  • key:文件名
  • token:七牛云的上传凭证(上传验证信息,前端通过接口请求后端获得)
  • putExtra:一些参数,本文主要设定和限制文件类型
  • config:一些参数,本文主要用来设置cdn加速

方法

  • next:获取文件上传进度的方法
  • error:上传错误时的回调
  • complete:上传成功时的回调
const observable = qiniu.upload(file, key, token, putExtra, config)
const subscription = observable.subscribe(next, error, complete)

本文参数示例

// 设置文件类型
let putExtra = {
    fname: "",
    params: {},
    mimeType: ["image/png", "image/jpeg", "image/gif", "image/webp"],
};
//使用cdn加速
let config = {
    useCdnDomain: true,
};
NO.2
获取token

本文使用faskapi

官方文档:https://fastapi.tiangolo.com/zh/tutorial/cors/

安装依赖

安装fastapi

pip install fastapi

安装uvicorn

pip install "uvicorn[standard]"

安装qiniu(Python SDK)

pip install qiniu

代码示例

from typing import Union
from fastapi import FastAPI
from qiniu import Auth, put_file, etag
import qiniu.config
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 设置跨域
origins = [
    "*"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
def read_root():
    return {"Hello": "World"}


@app.get("/getQiniuToken")
def getQiniuToken(key: str = "xxx.webp"):
    # 需要填写你的 Access Key 和 Secret Key
    access_key = 'access_key'
    secret_key = 'secret_key'
    # 构建鉴权对象
    q = Auth(access_key, secret_key)
    # 要上传的空间
    bucket_name = 'xxx'
    # 上传后保存的文件名
    key = key
    # print("key", key)
    # 生成上传 Token,可以指定过期时间等
    token = q.upload_token(bucket_name, key, 3600)
    return {
        "code": 0,
        "data": {
            "token": token,
            "domain": "https://xxx.domain.com/",
            "key": key
        },
        "msg": "success"
    }

替换 access_key

替换 secret_key

七牛云管理后台

个人中心-密钥管理

启动服务

uvicorn main:app --reload
NO.3
前端上传

代码示例

// 上传到七牛云
qiniuUpdata(file = null, fileName = ``) {
  let that = this;
  let key = file.name || fileName;
  console.log(`key`, key);
  let token = ``;
  // 设置文件类型
  let putExtra = {
    fname: "",
    params: {},
    mimeType: ["image/png", "image/jpeg", "image/gif", "image/webp"],
  };
  //使用cdn加速
  let config = {
    useCdnDomain: true,
  };
  // 发送 GET 请求
  axios({
    method: "get",
    url: "http://xxx:8000/getQiniuToken",
    params: {
      key: key,
    },
  })
    .then((res) => {
    console.log(`获取到token`, res);
    if (
      res.status == 200 &&
      res.data &&
      res.data.code == 0 &&
      res.data.data &&
      res.data.data.token
    ) {
      token = res.data.data.token;
      const observable = qiniu.upload(file, key, token, putExtra, config);
      const subscription = observable.subscribe(
        () => {
          console.log(`next`);
        },
        (error) => {
          console.log(`error`, error);
          ElMessage.error("上传七牛云失败");
        },
        (resData) => {
          console.log(`上传完成`, resData);
          let imgUrl = res.data.data.domain + res.data.data.key;
          console.log(`imgUrl`, imgUrl);
        }
      );
    }
  })
    .catch(() => {
  })
    .finally(() => {
  });
},

NO.4
Tips

获取token的key和上传七牛云时的key要一致(文件名)

使用浏览器上传图片到七牛云是为了避免使用PicGo等图床客户端

同时把图片转码webp(ffmpeg),图片重命名(js),图片上传七牛云(qiniu sdk),图片Url自动写入剪切板(web api)设置为一键自动化,省去每次编辑博客,处理图片的时间

END.