当前位置: 首页 > news >正文

纯前端实现图片上传七牛云

 首先安装下依赖:

npm install qiniu-js crypto-js

然后封装一下 uploaderHelper.ts 

import * as qiniu from 'qiniu-js';
// @ts-ignore
import CryptoJS from 'crypto-js'// 请求接口上传图片
export function uploadFile(file: File) {const uptoken = getToken('你的ak','你的sk','对应空间');const key = file.name;const config = {useCdnDomain: true,region: qiniu.region.z0,forceDirect: true // 是否上传全部采用直传方式};const putExtra: any = {fname: file.name,mimeType: ['image/png', 'image/jpeg', 'image/gif']};return qiniu.upload(file, key, uptoken, putExtra, config);
}
// eslint-disable-next-line camelcase
export default function getToken(access_key: string, secret_key: string, bucketname: string) {// 构造策略var putPolicy = {"scope": bucketname,"deadline": 3600 + Math.floor(Date.now() / 1000)}var encoded = base64Encode(utf16to8(JSON.stringify(putPolicy)));var hash = CryptoJS.HmacSHA1(encoded, secret_key);// 构造凭证var encodedSign = hash.toString(CryptoJS.enc.Base64).replace(/\//g, '_').replace(/\+/g, '-');// eslint-disable-next-line camelcasevar uploadToken = access_key + ':' + encodedSign + ':' + encoded;return uploadToken;
}
function base64Encode(str: string) {var out, i, len;var c1, c2, c3;len = str.length;i = 0;out = "";var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";while (i < len) {c1 = str.charCodeAt(i++) & 0xff;if (i === len) {out += base64EncodeChars.charAt(c1 >> 2);out += base64EncodeChars.charAt((c1 & 0x3) << 4);out += "==";break;}c2 = str.charCodeAt(i++);// eslint-disable-next-line eqeqeqif (i === len) {out += base64EncodeChars.charAt(c1 >> 2);out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));out += base64EncodeChars.charAt((c2 & 0xF) << 2);out += "=";break;}c3 = str.charCodeAt(i++);out += base64EncodeChars.charAt(c1 >> 2);out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));out += base64EncodeChars.charAt(c3 & 0x3F);}return out;
}
function utf16to8(str: string) {var out, i, len, c;out = "";len = str.length;for (i = 0; i < len; i++) {c = str.charCodeAt(i);if ((c >= 0x0001) && (c <= 0x007F)) {out += str.charAt(i);} else if (c > 0x07FF) {out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));} else {out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));}}return out;
}

然后对应上传图片的文件中引入该文件下的 uploadFile方法使用即可 ,使用方法如下:

uploadFile(files[0]).subscribe({next: (result) => {console.log(result)},error: (err) => {console.log(err)},complete: (e) => {//上传成功会返回数据console.log(e)}
});

相关文章:

纯前端实现图片上传七牛云

首先安装下依赖&#xff1a; npm install qiniu-js crypto-js 然后封装一下 uploaderHelper.ts import * as qiniu from qiniu-js; // ts-ignore import CryptoJS from crypto-js// 请求接口上传图片 export function uploadFile(file: File) {const uptoken getToken(你的…...

win10+wsl2+Ubuntu20.2+Pycharm+WSL解释器

目的&#xff1a;创建一个ubuntu系统下的python解释器&#xff0c;作为win平台下的pycharm的解释器。 这样做的好处是可以直接在win系统里操作文件&#xff0c;相比于linux方便一点&#xff0c;而且也不用对wsl的子系统进行迁移。 一、安装前准备 1. 设置-Windows更新-window…...

EL与JSTL

目录 EL EL语法 EL运算符 JSTL JSTL标签分类 JSP脚本&#xff1a;代码结构混乱、脚本与HTML 混合易出错、代码不易维护。 EL表达式&#xff1a;优化程序代码&#xff0c;增加程序可读性。 EL EL语法 EL表达式 ${ EL 表达式 } EL操作符 操作符“ . ” 获取对象的属性&a…...

【Linux】动态库和静态库

动态库和静态库 软链接硬链接硬链接要注意 自定义实现一个静态库(.a)解决、使用方法静态库的内部加载过程 自定义实现一个动态库&#xff08;.so&#xff09;动态库加载过程 静态库和动态库的特点 软链接 命令:ln -s 源文件名 目标文件名 软链接是独立连接文件的&#xff0c;他…...

R语言:联合多指标的ROC曲线

# 加载数据和包rm(list=ls())library(pROC)library(ggplot2)setwd("C:/Users/syy/Desktop/MRI_lab/")data<- read.csv("test1.csv", header = T)data$Groups...

将一个树形结构的数据平铺成一个一维数组(vue3)

一、需求描述 由于自带组件库没有具体完善,无法实现像element-ui这种可以多选选择任意一级的选项,也就是说,选择父级的时候不会联动选择子级的全部 例如: 所以,才会出现【二、案例场景】类似的场景,可以用来多选 ,并可以实现单选父级而不关联子级,选择了将树状数据进…...

OSCS开源安全周报第 56 期:Apache Airflow Spark Provider 任意文件读取漏洞

本周安全态势综述 OSCS 社区共收录安全漏洞 3 个&#xff0c;公开漏洞值得关注的是 Apache NiFi 连接 URL 验证绕过漏洞(CVE-2023-40037)、PowerJob 未授权访问漏洞(CVE-2023-36106)、Apache Airflow Spark Provider 任意文件读取漏洞(CVE-2023-40272)。 针对 NPM 、PyPI 仓库…...

CleanMyMac2024永久版Mac清理工具

Mac电脑作为相对封闭的一个系统&#xff0c;它会中毒吗&#xff1f;如果有一天Mac电脑产生了疑似中毒或者遭到恶意不知名攻击的现象&#xff0c;那又应该如何从容应对呢&#xff1f;这些问题都是小编使用Mac系统一段时间后产生的疑惑&#xff0c;通过一番搜索研究&#xff0c;小…...

软考高级系统架构设计师(一)计算机硬件

【原文链接】软考高级系统架构设计师&#xff08;一&#xff09;计算机硬件 1.1 计算机硬件组成 1.1.1 计算机的基本硬件组成 运算器控制器存储器输入设备输出设备 1.1.2 中央处理单元&#xff08;CPU&#xff09; 中央处理单元&#xff08;CPU&#xff09;的组成 运算器…...

bat文件中自定义cmd命令;执行完退出命令提示符窗口

1. bat中启动cmd命令 start cmd /k " cmd中命令行里自定义的命令 " 2.编写规则 start cmd /k "命令1 & 命令2 & 命令3" (无论前面命令是否成功, 后面都会执行start cmd /k "命令1 && 命令2 && 命令3 " (仅…...

深度学习的经典算法的论文、解读和代码实现

文章目录 CNN网络的经典算法LeNet-5AlexNetVGGInceptionInception-v1(GoogLeNet)BN-Inception ResNetR-CNNR-CNNFast R-CNNFaster R-CNN YOLOYOLO v1YOLO v2YOLO v3YOLO v4 RNN的经典算法RNNGRULSTMEncoder-DecoderAttentionTransformer CNN网络的经典算法 LeNet-5 来源论文&…...

开源TTS+gtx1080+cuda11.7+conda+python3.9吊打百度TTS

一、简介 开源项目&#xff0c;文本提示的生成音频模型 https://github.com/suno-ai/bark Bark是由Suno创建的基于变换器的文本到音频模型。Bark可以生成极为逼真的多语种演讲以及其他音频 - 包括音乐、背景噪音和简单的声音效果。该模型还可以产生非言语沟通&#xff0c;如…...

【私有GPT】CHATGLM-6B部署教程

【私有GPT】CHATGLM-6B部署教程 CHATGLM-6B是什么&#xff1f; ChatGLM-6B是清华大学知识工程和数据挖掘小组&#xff08;Knowledge Engineering Group (KEG) & Data Mining at Tsinghua University&#xff09;发布的一个开源的对话机器人。根据官方介绍&#xff0c;这是…...

基于“R语言+遥感“水环境综合评价方法教程

详情点击链接&#xff1a;基于"R语言遥感"水环境综合评价方法教程 一&#xff1a;R语言 1.1 R语言特点&#xff08;R语言&#xff09; 1.2 安装R&#xff08;R语言&#xff09; 1.3 安装RStudio&#xff08;R语言&#xff09; &#xff08;1&#xff09;下载地址…...

To_Heart—题解——P6234 [eJOI2019] T形覆盖

link. 突然很想写这篇题解。虽然题目不算难。 考场只有30分是为什么呢&#xff1f;看来是我没有完全理解这道题目吧&#xff01; 首先很明显的转换是&#xff0c;把 T 型覆盖看成十字形&#xff0c;再考虑最后减去某一块的贡献。 然后然后直接往原图上面放十字形!对于每一个…...

[软件工具]精灵标注助手目标检测数据集格式转VOC或者yolo

有时候我们拿到一个数据集发现是xml文件格式如下&#xff1a; <?xml version"1.0" ?> <doc><path>C:\Users\Administrator\Desktop\test\000000000074.jpg</path><outputs><object><item><name>dog</name>…...

Spring BeanName自动生成原理

先看代码演示 项目先定义一个User类 public class User {private String name;Overridepublic String toString() {return "User{" "name" name \ };}public String getName() {return name;}public void setName(String name) {this.name name;} }…...

论文阅读_图形图像_U-NET

name_en: U-Net: Convolutional Networks for Biomedical Image Segmentation name_ch: U-Net&#xff1a;用于生物医学图像分割的卷积网络 addr: http://link.springer.com/10.1007/978-3-319-24574-4_28 doi: 10.1007/978-3-319-24574-4_28 date_read: 2023-02-08 date_publi…...

基于热交换算法优化的BP神经网络(预测应用) - 附代码

基于热交换算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于热交换算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.热交换优化BP神经网络2.1 BP神经网络参数设置2.2 热交换算法应用 4.测试结果&#xff1a;5.Matlab代…...

基于秃鹰算法优化的BP神经网络(预测应用) - 附代码

基于秃鹰算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于秃鹰算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.秃鹰优化BP神经网络2.1 BP神经网络参数设置2.2 秃鹰算法应用 4.测试结果&#xff1a;5.Matlab代码 摘要…...

2.文章复现《热电联产系统在区域综合能源系统中的定容选址研究》(附matlab程序)

0.代码链接 1.简述 光热发电是大规模利用太阳能的新兴方式&#xff0c;其储热系 统能够调节光热电站的出力特性&#xff0c;进而缓解光热电站并网带来的火电机组调峰问题。合理配置光热电站储热容量&#xff0c;能够 有效降低火电机组调峰成本。该文提出一种光热电站储热容 量配…...

如何开启esxi主机的ssh远程连接

环境&#xff1a;esxi主机&#xff0c;说明&#xff1a;esxi主机默认ssh是不开启的&#xff0c;需要人工手动启动&#xff0c;也可以设置同esxi主机一起开机启动。 1、找到esxi主机&#xff0c;点击“配置”那里&#xff0c;再点击右边的属性&#xff0c;如图所示&#xff1a; …...

Android Studio实现解析HTML获取json,解析json图片URL,将URL存到list,进行瀑布流展示

目录 效果build.gradle&#xff08;app&#xff09;添加的依赖&#xff08;用不上的可以不加&#xff09;AndroidManifest.xml错误activity_main.xmlitem_image.xmlMainActivityImage适配器ImageModel 接收图片URL 效果 build.gradle&#xff08;app&#xff09;添加的依赖&…...

Centos7 交叉编译QT5.9.9源码 AArch64架构

环境准备 centos7 镜像 下载地址&#xff1a;http://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/ aarch64交叉编译链 下载地址&#xff1a;https://releases.linaro.org/components/toolchain/binaries/7.3-2018.05/aarch64-linux-gnu/ QT5.9.9源代码 下载地址&#xff1…...

爬虫逆向实战(二十)--某99网站登录

一、数据接口分析 主页地址&#xff1a;某99网站 1、抓包 通过抓包可以发现登录接口是AC_userlogin 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”可以发现txtPassword和aws是加密参数 请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 无…...

【C# 基础精讲】LINQ to Objects查询

LINQ to Objects是LINQ技术在C#中的一种应用&#xff0c;它专门用于对内存中的对象集合进行查询和操作。通过使用LINQ to Objects&#xff0c;您可以使用统一的语法来查询、过滤、排序、分组等操作各种.NET对象。本文将详细介绍LINQ to Objects的基本概念、常见的操作和示例&am…...

【力扣】209. 长度最小的子数组 <滑动窗口>

【力扣】209. 长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的连续子数组 [numsl, numsl1, …, numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&a…...

帮助中心应该用什么工具做?

在线帮助中心是指一个位于互联网上的资源平台&#xff0c;提供给用户获取产品或服务相关信息、解决问题以及获取技术支持的渠道。它通常包含了组织化的知识库、常见问题解答&#xff08;FAQ&#xff09;、操作指南、教程视频、用户手册等内容。在线帮助中心的主要目标是为用户提…...

前端面试:【跨域与安全】跨域问题及解决方案

嗨&#xff0c;亲爱的Web开发者&#xff01;在构建现代Web应用时&#xff0c;跨域问题和安全性一直是不可忽视的挑战之一。本文将深入探讨跨域问题的背景以及解决方案&#xff0c;以确保你的应用既安全又能与其他域名的资源进行互操作。 1. 什么是跨域问题&#xff1f; 跨域问…...

【SQL中DDL DML DQL DCL所包含的命令】

SQL中DDL DML DQL DCL所包含的命令 关于DDL、DML、DQL、DCL的定义和适用范围如下&#xff1a; 数据定义语言&#xff08;Data Definition Language&#xff0c;DDL&#xff09;&#xff1a; DDL用于创建、修改和删除数据库中的表、视图、索引等对象。它的主要命令包括CREATE、A…...

搜索引擎搜不到网站/百度搜索推广的定义

目录 1 问题描述 2 解决方案 2.1 蛮力法 1 问题描述 深度优先查找&#xff08;depth-first search&#xff0c;DFS&#xff09;可以从任意顶点开始访问图的顶点&#xff0c;然后把该顶点标记为已访问。在每次迭代的时候&#xff0c;该算法紧接着处理与当前顶点邻接的未访问顶点…...

琼海网站建设/怎么样建一个网站

.NET程序员兄弟们&#xff0c;我们每天都在干什么&#xff1f;这篇文章可能写得极为不对&#xff0c;但是我的真是想法&#xff0c;可能是我对.NET的理解还不完全&#xff0c;也可能是我对JAVA的感情过于深厚。但我觉得现在的发展形式&#xff0c;JAVA的速度是慢慢超过.NET的。…...

吉林省建设监理检测网站/代发关键词排名包收录

母版&#xff1a;用来放置一些相同元素的部件 两个页面都放入母版 一处更改 所有更改 添加图片&#xff1a;双击可以本地添加 ---------- 创建share.axure账号 https://share.axure.com 之后可以在你的project创建你的项目 最好已版本号为基准 1.0 等等 然后登陆你的axure …...

青岛知名网站建设公司/三叶草gy5987

ARPA Internet上的主机被要求采用并实现此标准。 介绍 TELNET Protocol的目的是提供一个相对通用的&#xff0c;双向的&#xff0c;面向八位字节的通信方法。它主要的目标是允许接口终端设备的标准方法和面向终端的相互作用。可以预见到&#xff0c;此协议也可被用于终端到终端…...

h5网站搭建/网络优化工程师是做什么的

困扰了半天&#xff0c;一直没找到如何在含有输入语句的情况下用pycharm进行断点调试&#xff08;调试的同时进行输入交互&#xff09;&#xff0c; But 经过尝试&#xff0c;还是找到了~~~ 通过debug可以快速的找到报错信息&#xff0c;以及观察程序每步的运行步骤&#xff0c…...

做app模板网站有哪些/免费做网站怎么做网站链接

当然可以!这是一个使用辗转相除法来求最大公约数的 Java 程序示例: public class GCD {public static void main(String[] args) {int a = 24;int b = 36;int gcd = findGCD(a, b);System.out.println("最大公约数是:" + gcd);}...