微信小程序上传图片到七牛云

本文详细介绍如何使用七牛云存储图片,包括注册、创建空间、域名解析及使用微信小程序和Node.js上传图片的全过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

七牛云上传图片

第一次用七牛云,目的是存储一些图片
1.首先是七牛云的注册,很简单。
2.注册完创建新的空间
在这里插入图片描述
3.这时候会自动分配给你一个域名,但是有效期是30天。
在这里插入图片描述
4.若要长久使用,最好用自己的域名,域名要先备案
5.添加加速域名,我用的是二级域名,然后到云服务器控制台进行域名解析,我的是腾讯云
在这里插入图片描述
在这里插入图片描述
比如我的域名是img.xxx.xxx,那么主机记录就是img,记录类型就是上面那个,记录值是下面这个东西
在这里插入图片描述
然后就可以上传图片啦

微信小程序上传图片到七牛云

官方文档写得挺清楚,但是我没看太明白https://developer.qiniu.com/kodo/sdk/1289/nodejs
###拿到token
1.我用的是node+express写得简单接口,在里面拿到token的
a)配置文件
在这里插入图片描述
小接口

在这里插入图片描述

2.小程序段
a)用一个SDK https://github.com/gpake/qiniu-wxapp-sdk,存储所在区域啥的里面都有说,然后秘钥在 七牛云-个人中心-秘钥管理

b)小程序段拿到token,然后用这个SDK上传图片

const qiniuUploader = require('../../qiniuUploader.js')
Page({
	data: {
		imageURL:'',
		uptoken:''
	},
	test() {
		wx.request({		//拿到token
			url: 'http://localhost:4040/upload',
			header: {
				'Content-Type': 'application/json;charset=UTF-8'
			},
			method: 'POST',
			success: (response) => {
				this.setData({
					uptoken: response.data.date
				})
				console.log(this.data.uptoken)
			}
		})
		wx.chooseImage({		//微信小程序的API,获取临时图片地址
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success:(res) => {
				// tempFilePath可以作为img标签的src属性显示图片
				const img = res.tempFilePaths[0]
				// 交给七牛上传
				qiniuUploader.upload(img, (res) => {
					this.setData({
						'imageURL': res.imageURL,
					});
				}, (error) => {
					 console.log('error: ' + error);
				}, {
					region: 'SCN',	//华南
					domain: '你的域名', // 
					key: 'customFileName.jpg', // 上传到七牛云图片就是这名字了
					// 以下方法三选一即可,优先级为:uptoken > uptokenURL > uptokenFunc
					uptoken: this.data.uptoken, // 由其他程序生成七牛 uptoken
					uptokenURL: '存储空间所在区域', // 从指定 url 通过 HTTP GET 获取 uptoken,返回的格式必须是 json 且包含 uptoken 字段,例如: {"uptoken": "[yourTokenString]"}
					// uptokenFunc: function() {
					// 	return '[yourTokenString]';
					// }
				}, (res) => {
					console.log('上传进度', res.progress)
					console.log('已经上传的数据长度', res.totalBytesSent)
					console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
				}, () => {
					// 取消上传
				}, () => {
					// `before` 上传前执行的操作
				}, (err) => {
					// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
				});
			}
		})
	}
)}

然后就上传成功了,中间反了个错误,把秘钥复制叉劈了,搞了好久。

微信小程序上传文件到七牛云需要借助七牛云提供的客户端库,并通过WXML、WXSS和JavaScript编写相应的API调用代码。以下是一个简化的步骤: 1. **注册并配置七牛云账号**:首先,在七牛云官网注册账号,创建一个新的空间存储文件,并获取Access Key和Secret Key。 2. **安装七牛云SDK**:在微信小程序项目中,通过`npm install qiniu-js-sdk`命令安装Qiniu.js SDK库。 3. **引入依赖**:在项目的app.json中,添加对七牛云SDK的引用: ```json "dependencies": { "qiniu-js-sdk": "^7.6.4" } ``` 4. **初始化Qiniu client**:在你需要上传文件的地方,初始化一个Qiniu实例: ```javascript const Qiniu = require('qiniu-js-sdk'); const bucketName = 'your-bucket-name'; const uploadToken = getUploadToken(bucketName); // 获取用于上传的token let qiniuClient = new Qiniu.uploader({ bucket: bucketName, token: uploadToken, }); ``` 5. **上传文件**:使用`uploadFile`方法,提供本地文件路径以及回调函数处理上传结果: ```javascript wx.chooseFile({ count: 1, // 可选,选择文件的数量上限 sizeType: ['base64', 'temp'], // 可选,返回值的文件类型,默认为'temp' success: function(res) { let file = res.tempFilePath; // 或者 res.base64,取决于sizeType的选择 qiniuClient.uploadFile(file, 'filename.ext', {}, (err, info) => { if (err) { console.error(err); } else { console.log('上传成功,key:', info.key); // 接收上传后的url,例如:http://yourbucketname.qiniudn.com/filename.ext } }); } }); function getUploadToken(bucketName) { // 这里通常会从服务器获取,因为一般不会直接暴露secretKey // 使用你的Access Key和Secret Key构造鉴权信息 const auth = new Qiniu.Auth('your-access-key', 'your-secret-key'); return auth.uploadToken(bucketName); } ``` 6. **错误处理**:别忘了处理可能出现的各种错误情况,比如网络问题、权限不足等。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值