欧易okx交易所下载

欧易交易所又称欧易OKX，是世界领先的数字资产交易所，主要面向全球用户提供比特币、莱特币、以太币等数字资产的现货和衍生品交易服务，通过使用区块链技术为全球交易者提供高级金融服务。

APP下载   官网注册

微信小程序上传图片到七牛云,小程序Webview嵌入H5上传图片&原生小程序上传图片

学东西当然要学以致用，最近在帮朋友做微信小程序，没有选择mpvue，因为时间紧加上不熟悉，怕遇到坑不能快速处理，拖了进度，所以采用了原生小程序+webview的方式做了第一版。

小程序webview上传图片

因为涉及到H5，所以图片上传这块就用到了微信中的jssdk，

第一步是wx.config配置

前端代码如下:

abp.services.app.wxAccess.getOfficialAccountJsdkConfig().done(function (data) {            if (data) {                var appId = data.appId;                var timestamp = data.timestamp;                var nonceStr = data.noncestr;                var signature = data.signature;                wx.config({                    debug: false, //调试模式   当为tru时，开启调试模式                     appId: appId,                    timestamp: timestamp.toString(), //签名时间戳                    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) {                            //console.log(JSON.stringify(res));                        }                    });                });                wx.error(function(res){                    alert(JSON.stringify(res));                });            }        });

后端代码：

/// <summary>/// 获取公众号JsdkConfig/// </summary>/// <returns></returns>public async Task<Dtos.GetOfficialAccountJsdkConfigOutput> GetOfficialAccountJsdkConfig()        {            var input = new Dtos.GetAccessInput            {                AppId = _appConfiguration["WechatOfficialAccount:AppId"],                Secret = _appConfiguration["WechatOfficialAccount:Secret"]            };            var noncestr = Guid.NewGuid().ToString("N");            var jsapi = await GetJsapiTicket(input);            //var timestamp = (DateTime.Now.Ticks - new DateTime(1970, 1, 1, 0, 0, 0, 0).Ticks) / 10000000;            var timestamp = new Helper.UnixTime().DateTimeToUnix(DateTime.Now);            //var url = Request.UrlReferrer.OriginalString;            var url = _iHttpContextAccessor.HttpContext.Request.Headers[Microsoft.Net.Http.Headers.HeaderNames.Referer].ToString();            var shaStr = $"jsapi_ticket={jsapi.Permit}&noncestr={noncestr}×tamp={timestamp}&url={url}";            var signature = new Helper.Encrypt().Sha1Encrypt(shaStr);            return new Dtos.GetOfficialAccountJsdkConfigOutput            {                AppId = input.AppId,                Noncestr = noncestr,                Timestamp = timestamp,                Signature = signature            };        }

第二步就是调用jssdk

前端js代码如下：

wx.chooseImage({           count: 9,           needResult: 1,           sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有           sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有           success: function (data) {               //localIds = data.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片                             for (var localId = 0; localId <= data.localIds.length - 1; localId++) {                                     if (isIOS) {                       wx.getLocalImgData({                           localId: data.localIds[localId], // 图片的localID                           success: function (res) {                               // var localData = res.localData; // localData是图片的base64数据，可以用img标签显示                               //console.log(localData);                                                                                      }                       });                   } else {                                         }               }                         },           fail: function (res) {               alert(JSON.stringify(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.serverIdsArr.push(res.serverId);               if (erp.common.idx < localIds.length) { //本地图片ID 还没全部获取完图片媒体ID                   //调用上传递归函数                   erp.common.wxUploadImg(localIds, callback);               } else {                   //上传序号归零                   erp.common.idx = 0;                   //服务器csrf 验证字符串，如果后端框架没开启csrf，则不需要                   //alert(erp.common.serverIdsArr);                    abp.services.app.wxAccess.uploadMediaToQiniu({           WxMediaIds: mediaIds       }).done(function (data) {           var imageUrl = [];           for (var index = 0; index <= data.qiniuFiles.length - 1; index++) {               imageUrl.push(data.qiniuFiles[index].qiniuUrl);           }           $.hideLoading();                       callback && callback(imageUrl);              }).always(function(){           $.hideLoading();       });                   //serverIds = '';                   erp.common.serverIdsArr.length = 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<Dtos.UploadMediaToQiniuOutput> UploadMediaToQiniu(Dtos.UploadMediaToQiniuInput input){    var output = new Dtos.UploadMediaToQiniuOutput();    if (input.WxMediaIds.Count > 0)    {        output.QiniuFiles = new System.Collections.Generic.List<Dtos.QiniuFile>();        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 Helper.QiniuStorage(accessKey, secretKey, bucket);        foreach (var mediaId in input.WxMediaIds)        {            var url = $"https://api.weixin.qq.com/cgi-bin/media/get?access_token={access_token.Permit}&media_id={mediaId}";            var fileKey = qiniuStorage.UploadStream(url);            var fileUrl = $"{prefixPath}/{fileKey}";            output.QiniuFiles.Add(new Dtos.QiniuFile { 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 Helper.QiniuStorage(accessKey, secretKey, bucket);    var output = new QiniuTokenOutputDto() { UpToken = qiniuStorage.CreateUploadToken() };    return output;}

小程序端部分代码:

1、获取token2、调用小程序API，选择图片。 wx.chooseImage({      count: 9-this.data.cardImgList.length, //默认9      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有      sourceType: ['album', 'camera'], //从相册选择      success: (res) => {        res.tempFilePaths.forEach((item,index)=>{          that.upload2Qiniu(item);        });      }    });  } /*** 图片上传七牛云*/  upload2Qiniu(tempFilePaths) {    let token = this.data.token;    var that = this;    wx.uploadFile({      url: 'https://up-z0.qiniup.com',      name: 'file',      filePath: tempFilePaths,      header: {        "Content-Type": "multipart/form-data"      },      formData: {        token: that.data.upToken,      },      success: function (res) {        let data = JSON.parse(res.data)                //data.hash图片的资源名，可直接通过域名加资源名访问        // to do ...      },      fail: function (res) {        console.log(res)      }    });  }

如果需要更详细的资料，那么就请自行百度or谷歌吧

我只是记录我的学习过程，由于书读得少，可能很多地方表述或者是理解得不对，请轻喷并指正。

相关内容