关键词：
本文个人博客地址：https://www.leafage.top/posts/detail/21414BX0U
leafage-ms项目写了很久了，但是一直没有完成上传文件的功能，之前看了几次七牛云的文档，折腾了几次，没有成功，今天下了决心必须解决这个问题就又开始了各种找资料，看文档，看示例，终于搞定了。
项目中使用的是vite.js构建的，而且用的是typescript，网上的示例几乎没有，下面来一步步记录如何实现，七牛云的示例代码直接访问是无法访问的，这里就不挂地址了，直接看过程。
首先安装qiniu-js和crypto-js两个依赖，qiniu-js就是上传，crypto-js(记的添加.d.ts支持)是生成token时需要加密用的工具，安装命令如下：
yarn add crypto-js qiniu-js -D在工具/插件目录下新建upload.ts文件，参照官方文档来写上传方法，加密、生成token的方法，首先是上传方法，最终代码如下：
import * as qiniu from 'qiniu-js';
import CryptoJS from 'crypto-js'
// 请求接口上传图片
export function uploadFile(file: File) {
const uptoken = getToken("ss", "xx", "xx");
const key = file.name;
const config = {
useCdnDomain: true,
region: qiniu.region.z2,
forceDirect: true // 是否上传全部采用直传方式
};
const putExtra: any = {
fname: file.name, //文件原文件名
mimeType: ['image/png', 'image/jpeg', 'image/gif'] //用来限制上传文件类型，为 null 时表示不对文件类型限制；
};
return qiniu.upload(file, key, uptoken, putExtra, config);
}注意这里最终返回的是upload()的执行结果，是一个对象，里面有next, error, complete，这里不处理过程和结果，直接返回，在使用的地方进行处理。
uploadFile()方法需要暴露出去，供组件中使用
其中getToken()方法的三个参数分别是：accessKey、secretKey、bucketName，需要登录自己的七牛云账号查看，具体操作登陆后，点击头像，然后点击密钥管理，就能看到了，getToken()方法最终代码如下：
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, '-');
var uploadToken = access_key + ':' + encodedSign + ':' + encoded;
return uploadToken;
}getToken()方法中的base64Encode()和utf16to8()这两个方法的代码实现如下：
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++);
if (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;
}整个上传的方法就完成了，然后在组件使用，示例如下：
import { uploadFile } from "../../plugins/upload";在html中添加控件，示例如下：
<div class="mx-auto text-center">
<div class="text-center text-gray-600">
<label
for="file-upload"
class="relative cursor-pointer bg-white rounded-md text-gray-400 hover:text-indigo-500"
>
<svg
class="mx-auto h-8 w-8"
stroke="currentColor"
fill="none"
viewBox="0 0 48 48"
aria-hidden="true"
>
<path
d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
stroke-
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<input
id="file-upload"
name="cover"
type="file"
class="sr-only"
accept="image/png,image/jpeg,image/jpg"
@change="uploadImage($event.target.files)"
/>
</label>
</div>
<p class="text-xs text-gray-500">png, jpeg, jpg</p>
<p class="text-xs text-gray-500">up to 2MB</p>
</div>在方法中调用uploadFile方法，下面示例只上传一个文件：
// 上传文件
uploadImage(files: Array<File>) {
if (files.length > 0) {
uploadFile(files[0]).subscribe({
next: (result) => {
},
error: () => {
},
complete: (e) => {
let data = {
...this.postsData,
cover: "https://cdn.leafage.top/" + e.key,
};
this.postsData = data;
},
});
}
},到这里就成功了，不容易呀。
springboot上传文件到七牛云
准备工作mavenpom.xml添加七牛云的sdk依赖<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.27</version></dependency>配置项七牛云上传 查看详情
文件流数组上传到七牛云
首先要注册七牛云，申请个空间，获得密钥、等东西，引入官方sdk包，然后再开发文档中找到代码copy进去就可以了。因为非常简单，我就直接弄上代码了。1packagecom.qianmo.foru.bean.request;23importcom.qianmo.core.common.CommonRequest;4importorg.hi... 查看详情
前端上传图片头像到七牛云格式变成text
参考技术A流程：七牛云后台的对象存储功能，nodejs后台生成七牛云的token，前端利用elementUI/ice的upload组件，文件名和token作为参数请求到七牛云后台。配置已经完成，写接口用的是express，koa同理，主要做法是先接收前端的图片... 查看详情
canvas保存图片到七牛云(代码片段)
最近在做一个项目，需要在前端对图片切片并上传到七牛云技术要点canvas.toBlob(blob=>);//可将canvas保存成二进制文件formData.append(‘file‘,blob,‘filename‘);//将二进制文件添加到FormData中ajax.send(formData);//上传数据到后端处理代码实... 查看详情
小程序上传文件到七牛云
...160;) ,function() ) ,第二步：利用upfileAPI上传文件wx.uploadFile( formData:token:that.data.up_token,//这里是请求头部 查看详情
微信小程序上传图片及上传到上传到七牛云(代码片段)
微信小程序图片上传功能包含：上传到七牛云、删除图片、查看图片 1.创建子组件tpupload//wxml文件<viewstyle="padding:10px;"><!--图片上传--><viewclass="weui-uploader"><viewclass="img-vweui-uploader__bd">< 查看详情
上传base64图片到七牛云前端遇到的坑
介意前端普通引入七牛云SDk上传图片到七牛云需要多个js，所以才有了base64的上传方式，简化操作，（懒。）七牛云官方文档如下https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code 我们前端理所当然就... 查看详情
ueditor上传图片到七牛云存储（formapi,java）
转：http://my.oschina.net/duoduo3369/blog/174655ueditor上传图片到七牛云存储ueditor结合七牛传图片七牛的试炼开发前的准备与注意事项说明Let‘srock与ueditor结合前的准备工作首先从表单开始生成token建立图片空间生成token上传流程集成ueditor... 查看详情
php表单上传图片到七牛云存储并返回地址……求具体流程～有代码更好
...的资料太少了。研究了下API之后，现在已经能实现图片的上传和下载及上传之后的重定向。首先本篇文章实现的功能如下：1.利用表单上传功能，用户可以点击选择文件按钮，选择本地的一个文件，同时设定上传的图片的名称，... 查看详情
web上传图片到七牛云服务器(代码片段)
本文通过javaweb的使用,把要上传的图片通过浏览器上传到服务器上面.`文本仅供参考,可能出现很多不合理;`1创建对应的jsp页面:下面是jsp下面的对应的from表单,上传文件用的那么ImgFiles的属性名称,同样你可以使用其他的,或者... 查看详情
七牛云文件上传助手(代码片段)
qiniuyun_upload_tools最近写博客发现经常要上传图片到七牛云上去，每次打开网页登录然后上传感觉很慢，windows也没有一个好的上传工具，于是写了这样的一个工具。效果使用方法下载程序包点击下载解压后直接在config.json文件里面... 查看详情
七牛云上传androidapk文件
参考技术A1.如何将androidapk文件上传到七牛云？1.1首先要设置mimeType文件格式。如图片的：\'image/png\',\'image/jpeg\',\'image/jpg\',\'image/webp\'。1.2androidapk文件的格式为：\'application/vnd.android.package-archive\'2.如何拼接返回的url？2.1"https://res1.... 查看详情
go实战|电商平台图片上传到七牛云(代码片段)
...息2.config3.upload完整代码这一章节中我们介绍如何把图片上传到七牛云，并且返回对应图片的url。因为后续我们的创建的商品，更换头像等等都是把我们的图片上传七牛云存储，再返回对应的url的。1.获取配置信息打开... 查看详情
txt文件如何上传到七牛云的云空间当中，并如何生成外链接？成功的话加送50金币
云盘肯定有个上传文件的地方你可以点一下把你想上传的TXT上传上去然后它自己就会有连接了啊然后你把网址栏里的网址复制一下发给任何人任何人点这个东西进去都可以看到你上传的TXT文件的追问我是想云服务器的链接，这样... 查看详情
谁用七牛云设置水印成功了
...对于以图片为主的站点，这样可以节省很大带宽。将图片上传到七牛服务器的重点就是获得上传凭证uploadToken，直接把AccessKey和Secret放到客户端太不安全，容易被反编译。所以需要在服务器端根据AccessKey和Secret动态生成一个uploadT... 查看详情
如何将图片上传到七牛云平台？
参考技术A上一篇文章介绍了“如何将图片上传到Cloudinary云平台？”但是由于Cloudinary的服务器在国外，所以上传和读取图片的速度会很慢，不适合用作生产，因此有必要再介绍一下国内广受欢迎的“七牛”云平台。以及分步骤给... 查看详情
vue上传图片到七牛云实用攻略
参考技术Avue一般采用element 的upload上传图片/文件。首先，设定参数参考Element upload 文档其次，如图所示，重点在于domain和qiniuaddr两个参数！ 参考七牛云存储图片域名文档然后 上传一定要先获取到七... 查看详情
java实现上传网络图片到七牛云存储(代码片段)
...中，给我们返回该图片的地址。代码实现因为七牛云上传图片的时候，传递的是MultipartFile类型，所以我们需要将网络图片utl转换 查看详情