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

七牛云上传图片

第一次用七牛云，目的是存储一些图片
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({       //拿到tokenurl: '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 > uptokenFuncuptoken: this.data.uptoken, // 由其他程序生成七牛 uptokenuptokenURL: '存储空间所在区域', // 从指定 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` 上传接受后执行的操作(无论成功还是失败都执行)});}})}
)}

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

微信小程序上传图片到七牛云相关推荐

小程序上传图片到七牛云
小程序上传图片到七牛云一.创建七牛云账号,获取ak.sk,创建对象存储空间名称二.服务端接口获取七牛token值,个人使用的php编写的 ...
根据后台返回地址实现图片展示_微信小程序 - 前端接入七牛云上传图片和视频...
相信小程序开发者在开发过程中都会遇到上传代码包遇到大小限制这个问题,因为微信现在规定代码不能超过 2 MB 大小,但我们实际开发过程中难免会有业务需求要使用一些图片和视频等媒体文件,这样的话会导致上传 ...
小程序上传图片到七牛云（支持多张上传，预览，删除）
以下为wxml (使用的vant小程序ui框架,需在json文件里自行引入) <view class='clearFloat'><view class='upload_title'& ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
微信小程序（第七章）- 搜索框的实现
微信小程序(第七章)- 搜索框的实现搜索框的组成定义布局容器微信小程序1个页面所对应的4个文件具体实现步骤框架实现样式实现搜索框的组成外部容器i 内部容器两者关系:外部容器包裹内部容 ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序上传图片写法
微信小程序上传图片小程序上传图片需要用到小程序API中的wx.uploadFile()方法.以下是一个基本的示例代码: wx.chooseImage({count: 1,sizeType: ['or ...

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

七牛云上传图片

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

微信小程序上传图片到七牛云相关推荐

最新文章

热门文章