因为我们之前使用的上传图片在上传比较大的图片时回显耗时很长，所以要求改用七牛云，根据领导给的参考和自己查的资料，做出来一个比较简单的可以满足需求。
首先需要进行准备工作：
内容参考这里（领导给的参考，因为部分准备工作已经做过了，所以我这里就直接从我自己做过的开始）↓
https://zhuanlan.zhihu.com/p/159399992
1.实名认证后，和后端配合，给你一个接口去调用获取到七牛token （这个token可以存储在app.globalData里，方便后面使用）
在这里你要选择自己的上传的地区，一共有五个，详情请自己在github上面去看，还是比较详细的，另外有一个domain的配置，是回显的时候用的，是自己公司的配置好的（开始我以为是配置我选择的那个区域的地址，后来找了很久，然后试了公司的链接后发现的，如果你在参考这篇笔记，还是需要自己试一下的）
2.接口可以调通后，去github上下载sdk文件包
软件开发工具包 - 七牛开发者中心这是参考里面给的链接，但是你可以直接从github上拉
gitHub链接：https://github.com/gpake/qiniu-wxapp-sdk#usage
git clone https://github.com/gpake/qiniu-wxapp-sdk.git3.打开sdk包，把qiniuUploader.js导入你需要的小程序中，我放在了utils文件夹里，
4.剩下的就好说啦，这里封装了公共方法，借鉴的是：记录小程序使用七牛云上传图片详细步骤及遇到的坑 小程序七牛云上传文件代码封装_七牛云 小程序-CSDN博客
目前这个场景是：点击按钮调用wx.chooseMedia，仅支持单张，没有做任何处理（大小压缩等）：文章来源：https://www.toymoban.com/news/detail-845782.html
//upload.js
const { getToken } = require("../api/getQiniuToken.js") // 获取七牛云token接口
const qiniuUploader = require("./qiniuUploader.js"); // 引入七牛云js
const app = getApp(); // 获取应用实例
/**
* 初始化七牛相关参数
* @param {*} res 拿到的七牛云token
* @param {*} region 上传区域 ECN, SCN, NCN, NA, ASG，分别对应七牛的：华东，华南，华北，北美，新加坡 5 个区域
* @param {*} uptoken 七牛云token
* @param {*} domain bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接。
* @param {*} shouldUseQiniuFileName qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
* 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
* 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key
*/
const initQiniu = (res) => {
var options = {
region: 'ECN', // 华东
uptoken: res,
// uptokenURL: 'https://[yourserver.com]/api/uptoken',
// uptoken: '',
domain: '此处为自己公司配置的网址',
shouldUseQiniuFileName: false
};
qiniuUploader.init(options);
}
/**
* 获取token, getToken是自己封装的接口请求方法，然后使用promise异步返回结果
*/
const getUploadToken = () => {
return new Promise((resolve,reject)=>{
getToken().then(res =>{
if(res.data.message) {
app.globalData.uploadParams = res.data.message;//此处放在app globalData里是为了避免重复获取token，本次使用期间可以无需重复获取
initQiniu(res.data.message) //如果在uploadImg中配置，则不需要init
resolve(res.data.message)
}
})
})
}
/**
* 上传七牛
* @param {*} params 主要存储了上传到七牛云的区域及上面接口获取到的upToken值
* @param {*} files 图片文件
*/
const uploadImg = (params,files) => {
var state = 0; // 上传第几张图片
var imgList = []; // 保存图片数组
// let fileList = files.map(item => item.url); //若files是有url键的对象，则可map进去，但目前只考虑wx自带单张选择图片的情况
let fileList = [];
fileList.push(files)
var uploadArr = fileList; // chooseMedia上传成功的数组
var uploadNum = fileList.length; // 上传数组的长度
return new Promise((resolve, reject)=> {
for (let i = 0; i < uploadNum; i++) {
var random = Math.floor(Math.random() * 10000); //随机数
qiniuUploader.upload(uploadArr[i], (res) => {
// 以下注释内容是针对多张上传的图片做出处理，返回的是图片地址的数组
// state++;
// imgList.push(res.imageURL);
// if (state == uploadNum) {
// resolve(imgList);
// }
resolve(res)
}, (error) => {
reject('error');
console.log('error: ' + error);
wx.hideLoading();
},
// 以下为option中的自行配置参数，由于在init时就已经配置，所以这里注释掉，但可选择不init，在这里配置参数，
// {
// uploadURL: params.uploadURL, //上传到七牛的那个存储区域所对应的前缀地址，详见SDK中的区域图(如："https://up.qiniup.com")。
// domain: 'qiniu.pudu.live',//CDN加速域名，无需修改 || 按照自己需求，配置的下载地址
// uptoken: params.uploadToken, //服务端接口获取的七牛token值，我们这边后台返回的字段名为uploadToken，需要换成你们的自定义字段哦
// region: 'ECN',//上传区域，共有五个，按需选择
// key: null, // 图片自定义名称 避免名称重复此处设置为null可以解决上传undefined file exists问题
// }
)
}
})
}
module.exports = {
getUploadToken,
uploadImg
}
//所需组件 .wxml
<text bindtap="getQiNiuToken">选择图片</text>
<image src="{{imageObject.fileURL}}" mode="aspectFit"></image>
// 所需组件的 .js
import { uploadImg,getUploadToken } from "../../utils/upload"
data:{
imageObject: {}, // 图片上传（从相册）返回对象。上传完成后，此属性被赋值
}
//上传图片
handleUpload(params,file,type){
uploadImg(params,file).then((imgObj)=>{
console.debug("上传成功 files",imgObj);
this.setData({
imageObject: imgObj
})
}).catch((error)=>{
console.log("图片上传失败",error);
})
},
//选择图片 检查是否有七牛token
getQiNiuToken() {
let _this = this;
// 置空messageFileObject，否则在第二次上传过程中，wxml界面会存留上次上传的信息
_this.setData({
imageObject: {},
imageProgress: {}
});
wx.chooseMedia({
count: 1, // 目前仅支持单张上传
mediaType: ['image','video'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success(res) {
let filePath = res.tempFiles[0].tempFilePath; //图片地址
let uploadParams = app.globalData.uploadParams; //判断是否已经请求过上传token
if(uploadParams) {
_this.handleUpload(uploadParams,filePath)
} else {
getUploadToken().then((res)=>{ //globalData没有上传所需参数，先获取token再上传图片
_this.handleUpload(res,filePath);
})
}
}
})
},这样就可以实现一个最简单的上传、回显，中间遇到很多不懂的也是边查边试出来的，很多逻辑都不懂，但是功能实现了，各位大佬有更好的可以留言指正。文章来源地址https://www.toymoban.com/news/detail-845782.html
到了这里，关于【自用笔记】小程序中使用七牛云上传图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
