admin 微信小程序将图片上传到7友云，小程序Webview嵌入H5上传图片，基本小程序上传图片。
学习当然要学会利用。最近在帮朋友制作微信小程序。没有选择mpvue。因为时间紧迫，不熟悉，遇到坑，怕处理不快，怕拖进度，所以采用了基本小程序webview，制作了第一版。
小程序webview上传图片
因为涉及到H5，所以图片上传这块就用到了微信中的jssdk，
第一步是wx.config配置
前端代码如下:
abp.().done(function (data) {
if (data) {
var appId = da;
var timestamp = da;
var nonceStr = da;
var signature = da;
wx.config({
debug: false, //调试模式 当为tru时，开启调试模式
appId: appId,
timestamp: (), //签名时间戳
nonceStr: nonceStr, //生成签名的随机串
signature: signature, //签名
jsApiList: ['chooseImage', 'uploadImage'],
success: function () {
alert("配置成功");
},
fail: function () {
alert("配置失败");
}
});
wx.ready(function () {
// 在这里调用 API
wx.checkJsApi({
jsApiList: [
'chooseImage',
'uploadImage'
],
success: function (res) {
(res));
}
});
});
wx.error(function(res){
alert(res));
});
}
});
后端代码：
/// <summary>
/// 获取公众号JsdkConfig
/// </summary>
/// <returns></returns>
public async Task<D; GetOfficialAccountJsdkConfig()
{
var input = new D
{
AppId = _appConfiguration["WechatOfficialAccount:AppId"],
Secret = _appConfiguration["WechatOfficialAccount:Secret"]
};
var noncestr = Guid.NewGuid().ToString("N");
var jsapi = await GetJsapiTicket(input);
//var timestamp = - new DateTime(1970, 1, 1, 0, 0, 0, 0).Ticks) / 10000000;
var timestamp = new Hel().DateTimeToUnix);
//var url = Reque;
var url = _iH[Micro].ToString();
var shaStr = $"jsapi_ticket={j}&noncestr={noncestr}×tamp={timestamp}&url={url}";
var signature = new Hel().Sha1Encrypt(shaStr);
return new D
{
AppId = in,
Noncestr = noncestr,
Timestamp = timestamp,
Signature = signature
};
}
第二步就是调用jssdk
前端js代码如下：
wx.chooseImage({
count: 9,
needResult: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (data) {
//localIds = da[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
for (var localId = 0; localId <= da.length - 1; localId++) {
if (isIOS) {
wx.getLocalImgData({
localId: da[localId], // 图片的localID
success: function (res) {
// var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
(localData);
}
});
} else {
}
}
},
fail: function (res) {
alert(res));
//alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
}
});
jssdk中，如果是iOS的话，前端无法直接使用localIds资源id做展示，需要调用wx.getLocalImgData方法来获取图片的base64编码
提交前端选择的图片到服务端并由服务的上传到七牛云
前端部分代码：
wx.uploadImage({ //获取图片媒体ID
localId: localIds[erp.common.idx].toString(), // 需要上传的图片的本地ID
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) { //获取成功
// 上传序号，上传一张 累计 +1
erp.common.idx++;
//存储图片媒体ID，用，号分割
// serverIds += res.serverId + ',';
erp.common.);
if < localIds.length) { //本地图片ID 还没全部获取完图片媒体ID
//调用上传递归函数
erp.common.wxUploadImg(localIds, callback);
} else {
//上传序号归零
erp.common.idx = 0;
//服务器csrf 验证字符串，如果后端框架没开启csrf，则不需要
//aler);
abp.({
WxMediaIds: mediaIds
}).done(function (data) {
var imageUrl = [];
for (var index = 0; index <= da - 1; index++) {
imageUrl.pu[index].qiniuUrl);
}
$.hideLoading();
callback && callback(imageUrl);
}).always(function(){
$.hideLoading();
});
//serverIds = '';
erp.common. = 0;
return true;
}
},
fail: function (res) { //获取多媒体id失败 返回错误代码
alert("上传失败，msg：" + JSON.stringify(res));
}
});
后端部分代码:
/// <summary>
/// 上传文件到七牛
/// </summary>
/// <param name="input"></param>
/// <returns></returns>
//[RemoteService(false)]
public async Task<D; UploadMediaToQiniu input)
{
var output = new D();
if > 0)
{
ou = new Sy;D;();
var access_token = await GetOfficialAccountAccessToken();
var accessKey = _appConfiguration["Qny:qiniuyunAK"];
var secretKey = _appConfiguration["Qny:qiniuyunSK"];
var bucket = _appConfiguration["Qny:qiniuyunBucket"];
var prefixPath = _appConfiguration["Qny:prefixPath"];
var qiniuStorage = new Hel(accessKey, secretKey, bucket);
foreach (var mediaId in in)
{
var url = $"{acce}&media_id={mediaId}";
var fileKey = qiniuS(url);
var fileUrl = $"{prefixPath}/{fileKey}";
ou.Add(new D { QiniuUrl = fileUrl, WxMediaId = mediaId });
}
}
return output;
}
原生小程序上传图片到七牛云
后面考虑到一些交互上面的问题，就把原来的webview方式改成了全原生的模式。采用原生的方式，在图片上传上面就好处理多了，只需要实现获取到七牛云用于上传的token，然后使用wx.uploadFile即可上传。 服务端获取token代码：
/// <summary>
/// 获取七牛token
/// </summary>
/// <returns></returns>
public QiniuTokenOutputDto GetQiniuUpToken()
{
var accessKey = _appConfiguration["Qny:qiniuyunAK"];
var secretKey = _appConfiguration["Qny:qiniuyunSK"];
var bucket = _appConfiguration["Qny:qiniuyunBucket"];
var qiniuStorage = new Hel(accessKey, secretKey, bucket);
var output = new QiniuTokenOutputDto() { UpToken = qiniuS() };
return output;
}
小程序端部分代码:
1、获取token
2、调用小程序API，选择图片。
wx.chooseImage({
count: 9-, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: (res) => {
res.((item,index)=>{
(item);
});
}
});
}
/**
* 图片上传七牛云
*/
upload2Qiniu(tempFilePaths) {
let token = ;
var that = this;
wx.uploadFile({
url: ';,
name: 'file',
filePath: tempFilePaths,
header: {
"Content-Type": "multipart/form-data"
},
formData: {
token: ,
},
success: function (res) {
let data = JSON.parse)
图片的资源名，可直接通过域名加资源名访问
// to do ...
},
fail: function (res) {
con(res)
}
});
}
如果需要更详细的资料，那么就请自行百度or谷歌吧
我只是记录我的学习过程，由于书读得少，可能很多地方表述或者是理解得不对，请轻喷并指正。