微信小程序基于腾讯云对象存储的图片上传功能

在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢。2.时常有上传其他文件来攻击服务器,安全上得不到保障。所以我们在经过慎重考虑觉得使用第三方的云存储服务。

在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好;在下载用时方面表现略优于阿里云;文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定。当然这与我们主要用于开发微信小程序是有着密切的关系。

在我们酷客多小程序使用腾讯云对象存储的时候除了直接使用 API 接口外,COS 提供了丰富多样的 SDK 给我们使用,可是在他提供的SDK中并没有发现我们Asp.net相关的SDK

在一番百度和一顿操作终于让我找到啦!看到没,只能说隐藏的真深,而且还是历史版本的,但是不管怎么样我们还是找到啦

找到C#的SDK,下载下来 (附上C#版本SDK的下载地址 C# SDK github项目下载地址)然后按照SDK中提供的方法,就可以成功上传!

然而并没有这么简单,当我们使用SDK中的方法的时候发现,SDK中的方法只适用于,绝对路径地址的文件上传!也就是并不满足我们ASP.Net中使用文件域上传文件。此时我们只有对方法进行改造!

附上改造过后代码:

 /// <summary>
    /// 文件流上传
    /// 说明: 酷客多小程序
    /// 其中分片上传使用SliceUploadInit SliceUploadData SliceUploadFinihs
    /// </summary>
    /// <param name="bucketName">bucket名称</param>
    /// <param name="remotePath">远程文件路径</param>
    /// <param name="localPath">本地文件路径</param>
    /// <param name="parameterDic">参数Dictionary</param>
    /// <returns></returns>
    public string UploadFile(string bucketName, string remotePath, Stream file, string filename,Dictionary<string, string> parameterDic = null)
    {
      if (remotePath.EndsWith("/"))
      {
        return constructResult(ERRORCode.ERROR_CODE_PARAMETER_ERROE, "file path can not end with '/'");
      }
      string bizAttribute = "";
      if (parameterDic != null && parameterDic.ContainsKey(CosParameters.PARA_BIZ_ATTR))
        bizAttribute = parameterDic[CosParameters.PARA_BIZ_ATTR];
      int insertOnly = 1;
      if (parameterDic != null && parameterDic.ContainsKey(CosParameters.PARA_INSERT_ONLY))
      {
        try
        {
          insertOnly = Int32.Parse(parameterDic[CosParameters.PARA_INSERT_ONLY]);
        }
        catch (Exception e)
        {
          Console.WriteLine(e.Message);
          return constructResult(ERRORCode.ERROR_CODE_PARAMETER_ERROE, "parameter insertOnly value invalidate");
        }
      }
      return Upload(bucketName, remotePath, file, filename, bizAttribute, insertOnly);
    }

    /// <summary>
    /// 单个文件上传
    /// 说明: 酷客多小程序
    /// <param name="bucketName">bucket名称</param>
    /// <param name="remotePath">远程文件路径</param>
    /// <param name="localPath">本地文件路径</param>
    /// <param name="biz_attr">biz_attr属性</param>
    /// <param name="insertOnly">同名文件是否覆盖</param>
    /// <returns></returns>
    public string Upload(string bucketName, string remotePath, Stream file,string filename,
                 string bizAttribute = "", int insertOnly = 1)
    {

      var url = generateURL(bucketName, remotePath);
      var sha1 = SHA1.GetFileSHA1(file);
      var data = new Dictionary<string, object>();
      data.Add("op", "upload");
      data.Add("sha", sha1);
      data.Add("biz_attr", bizAttribute);
      data.Add("insertOnly", insertOnly);

      var expired = getExpiredTime();
      var sign = Sign.Signature(appId, secretId, secretKey, expired, bucketName);
      var header = new Dictionary<string, string>();
      header.Add("Authorization", sign);

      return httpRequest.SendRequest(url, ref data, HttpMethod.Post, ref header, timeOut, file, filename);
    }

    #region 直接上传文件流
    public string SendRequest(string url, ref Dictionary<string, object> data, HttpMethod requestMethod,
    ref Dictionary<string, string> header, int timeOut, Stream file,string filename, long offset = -1, int sliceSize = 0)
    {
      try
      {
        //Console.WriteLine("url:" + url);
        System.Net.ServicePointManager.Expect100Continue = false;
        if (requestMethod == HttpMethod.Get)
        {
          var paramStr = "";
          foreach (var key in data.Keys)
          {
            paramStr += string.Format("{0}={1}&", key, HttpUtility.UrlEncode(data[key].ToString()));
          }
          paramStr = paramStr.TrimEnd('&');
          url += (url.EndsWith("?") ? "&" : "?") + paramStr;
        }
        request = (HttpWebRequest)HttpWebRequest.Create(url);
        request.Accept = CosDefaultValue.ACCEPT;
        request.KeepAlive = true;
        request.UserAgent = CosDefaultValue.USER_AGENT_VERSION;
        request.Timeout = timeOut;
        foreach (var key in header.Keys)
        {
          if (key == "Content-Type")
          {
            request.ContentType = header[key];
          }
          else
          {
            request.Headers.Add(key, header[key]);
          }
        }
        if (requestMethod == HttpMethod.Post)
        {
          request.Method = requestMethod.ToString().ToUpper();
          var memStream = new MemoryStream();
          if (header.ContainsKey("Content-Type") && header["Content-Type"] == "application/json")
          {
            var json = JsonConvert.SerializeObject(data);
            var jsonByte = Encoding.GetEncoding("utf-8").GetBytes(json.ToString());
            memStream.Write(jsonByte, 0, jsonByte.Length);
          }
          else
          {
            var boundary = "---------------" + DateTime.Now.Ticks.ToString("x");
            var beginBoundary = Encoding.ASCII.GetBytes("\r\n--" + boundary + "\r\n");
            var endBoundary = Encoding.ASCII.GetBytes("\r\n--" + boundary + "--\r\n");
            request.ContentType = "multipart/form-data; boundary=" + boundary;
            var strBuf = new StringBuilder();
            foreach (var key in data.Keys)
            {
              strBuf.Append("\r\n--" + boundary + "\r\n");
              strBuf.Append("Content-Disposition: form-data; name=\"" + key + "\"\r\n\r\n");
              strBuf.Append(data[key].ToString());
            }
            var paramsByte = Encoding.GetEncoding("utf-8").GetBytes(strBuf.ToString());
            memStream.Write(paramsByte, 0, paramsByte.Length);
            memStream.Write(beginBoundary, 0, beginBoundary.Length);
            var fileStream = file;
            const string filePartHeader =
              "Content-Disposition: form-data; name=\"fileContent\"; filename=\"{0}\"\r\n" +
              "Content-Type: application/octet-stream\r\n\r\n";
            var headerText = string.Format(filePartHeader, filename);
            var headerbytes = Encoding.UTF8.GetBytes(headerText);
            memStream.Write(headerbytes, 0, headerbytes.Length);
            if (offset == -1)
            {
              var buffer = new byte[1024];
              int bytesRead;
              while ((bytesRead = fileStream.Read(buffer, 0, buffer.Length)) != 0)
              {
                memStream.Write(buffer, 0, bytesRead);
              }
            }
            else
            {
              var buffer = new byte[sliceSize];
              int bytesRead;
              fileStream.Seek(offset, SeekOrigin.Begin);
              bytesRead = fileStream.Read(buffer, 0, buffer.Length);
              memStream.Write(buffer, 0, bytesRead);
            }
            fileStream.Close();
            memStream.Write(endBoundary, 0, endBoundary.Length);
          }
          request.ContentLength = memStream.Length;
          var requestStream = request.GetRequestStream();
          memStream.Position = 0;
          var tempBuffer = new byte[memStream.Length];
          memStream.Read(tempBuffer, 0, tempBuffer.Length);
          memStream.Close();
          requestStream.Write(tempBuffer, 0, tempBuffer.Length);
          requestStream.Close();
          //Console.WriteLine(strBuf.ToString());
        }
        //Console.WriteLine(request.ContentType.ToString());
        var response = request.GetResponse();
        using (var s = response.GetResponseStream())
        {
          var reader = new StreamReader(s, Encoding.UTF8);
          return reader.ReadToEnd();
        }
      }
      catch (WebException we)
      {
        if (we.Status == WebExceptionStatus.ProtocolError)
        {
          using (var s = we.Response.GetResponseStream())
          {
            var reader = new StreamReader(s, Encoding.UTF8);
            return reader.ReadToEnd();
          }
        }
        else
        {
          throw we;
        }
      }
      catch (Exception e)
      {
        throw e;
      }
    }

使用上面改造过后的方法直接传入文件流即可通过文本域的方式上传文件到腾讯云上面去!

总结

以上所述是小编给大家介绍的微信小程序基于腾讯云对象存储的图片上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

您可能感兴趣的文章:

  • 微信小程序实现图片上传功能实例(前端+PHP后端)
  • 微信小程序实现图片上传、删除和预览功能的方法
  • 微信小程序多张图片上传功能
  • 微信小程序 图片上传实例详解
  • 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
  • 微信小程序开发(二)图片上传+服务端接收详解
  • 微信小程序教程之本地图片上传(leancloud)实例详解
(0)

相关推荐

  • 微信小程序实现图片上传功能实例(前端+PHP后端)

    前言 几乎每个程序都需要用到图片.下面就来给大家介绍前端+PHP后端实现微信小程序实现图片上传功能,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 方法如下: 一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style=

  • 微信小程序开发(二)图片上传+服务端接收详解

    这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口. 看一下页面效果图 一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了 首先是小程序的wxml代码 <view class="xd-container">

  • 微信小程序多张图片上传功能

    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api 示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload',

  • 微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序 leancloud --本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客 直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da

  • 微信小程序 图片上传实例详解

    一.了解wx.chooseImage(OBJECT) 二.代码编程 在pages文件里面创建uploadimg文件夹 1.编写页面结构:uploadimg.wxml <view class="container" style="padding:1rem;"> <button type="primary"bindtap="chooseimage">获取图片</button> <image

  • 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

    今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button> <image src="{{tempFilePaths }}" mode="aspecFill"

  • 微信小程序实现图片上传、删除和预览功能的方法

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i

  • 微信小程序基于腾讯云对象存储的图片上传功能

    在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于

  • vue.js云存储实现图片上传功能

    前言 提示:以下是本篇文章正文内容,下面案例可供参考 一.对象存储 示对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,具有高扩展性.低成本.可靠安全等优点.通过控制台.API.SDK 和工具等多样化方式,用户可简单.快速地接入 COS,进行多格式文件的上传.下载和管理,实现海量数据存储和管理. 二.配置腾讯云Cos 1.引入库 代码如下(示例): 目标 : 配置一个腾讯云cos 由于上课的开发的特殊性,我们不希望把所有的图片都上传到我们

  • 微信小程序接入腾讯云验证码的方法步骤

    前言:最近做了一个小程序抽奖的活动,出现了部分用户恶意薅羊毛的现象,因此考虑接入腾讯云的验证码. 其实腾讯的官方文档写的相当清晰:https://cloud.tencent.com/doc... 不想啃文档的筒子们的就往下继续看吧~(虽然大同小异) 整体效果 1.小程序触发验证,跳转到验证码小程序 2.在验证码小程序内通过验证,并携带参数跳回原来的小程序 3.在原来的小程序内,监测携带回的参数,并作后续操作 前提条件 验证码接入前,需要先在验证码控制台中注册 AppID 和 AppSecret,

  • 微信小程序基于canvas渐变实现的彩虹效果示例

    本文实例讲述了微信小程序基于canvas渐变实现的彩虹效果.分享给大家供大家参考,具体如下: 微信小程序提供了两种渐变的方式: createLinearGradient(x,y,x1,y1)创建一个线性的渐变. x,y           起点坐标 x1,y1        终点坐标 createCircularGradient(x,y,r)创建一个从圆心开始的渐变. x,y            圆心坐标 r                 半径 创建了渐变对象之后,必须添加两个或者两个以上的

  • 微信小程序基于高德地图API实现天气组件(动态效果)

    ​在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有需要的开发者. 1.组件介绍 1.1 组件效果预览图 ​小程序组件继承了外部样式colorui的色彩,但实际动画会根据父节点的color属性自动填充颜色,即使不引入colorui这个样式库,也可以在该组件引用外定义一个有color属性的块包裹该组件,同样可以达到如图的效果. 1.2 构造形式 1.3 支持的动画效果 简单介绍下,动画由3个部分组成 一个是主

  • 微信小程序 接入腾讯地图的两种写法

    最近在写微信小程序,遇到了一些坑,在网上也查了好多,感觉都没有我想要的答案, 刚处理了这个地图的问题,在这里总结下,希望可以帮助大家. 在微信小程序中,腾讯地图的接入其实是有两种方式的,第一种调用腾讯本身的地图,第二种是使用插件 ma-route 一.调用腾讯本身的地图 实现结果如下图: 这个非常简单,而且用的人也很多, 只需要调用两个地图的api. 就是上边的两个.当然调用openLocation的时候你首先要调用getLocation授权 需要你在app.json里配置信息,如下: 在你需要

  • 微信小程序 使用腾讯地图SDK详解及实现步骤

    微信小程序 使用腾讯地图SDK详解及实现步骤 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 申请开发者密钥(key):申请密匙 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com

  • 微信小程序基于slider组件动态修改标签透明度的方法示例

    本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo

  • 微信小程序基于本地缓存实现点赞功能的方法

    本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享给大家供大家参考,具体如下: wxml中的写法 注意: 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果: 2. 为图片绑定点击事件bindtap="toCollect",两个image标签都要绑定! <image wx:if="{{collection}}" src="/images/icon/pic1.png" bind

  • 微信小程序基于高德地图查找位置并显示文字

    这篇文章主要介绍了微信小程序基于高德地图查找位置并显示文字,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.根据经纬度在 地图上查找定位 var key = app.globalData.amapKey; var myAmapFun = new amapFile.AMapWX({ key: key }); myAmapFun.getRegeo({ iconPath: "../../assets/marker_checked.png"

随机推荐