跟我一起，利用bitcms内容管理系统从0到1学习小程序开发：上传图片到服务器

Posted 2020-10-22 zhuyue

上一篇跟我一起，利用bitcms内容管理系统从0到1学习小程序开发：二、与服务端通信，Hello bitcms!被园子管理员人从首页撤下，理由是“原创精品，排版整齐，有足够的篇幅，与程序员相关，能够让读者从中学到知识”，经过认真深刻的反省，文章确实存在很多问题。

1、排版不够认真。周五下班前匆匆赶稿，只对内容进行简单的加粗换行。就勿勿发表了，确实排版不够精细。

2、原创必须的，但不够精品。内容是有大量的代码段，没有细化分解，阅读起来确实费劲。

3、作为程序员是代码写的多，但文字内容确实写的少，内容生涩是难免的。但我保证，文章里的每段代码都是经过推敲，测试过的。保证不了万全，但一定能调试成功。

问题多多，用心对待吧。再难，也要坚持把《利用bitcms内容管理系统从0到1学习小程序开发》系列文章写完。

 

一、微信小程序接口

上篇利用wx.request(OBJECT) 服务器进行通信，今天就利用wx.chooseImage(OBJECT)和wx.uploadFile(OBJECT)两个接口配合着进行图片上传。

上传使用图片，必须先选择图片。小程序官方API给的图片选择接口wx.chooseImage(OBJECT)，object参数表如下

上传接口wx.uploadFile(OBJECT)，object参数表如下

对比下两个接口的参数，选择图片接口wx.chooseImage最多允许选择9张图片，而wx.uploadFile的参数filePath是string类型，最多只能上传一张图片。所以，多图片上传时是应注意，对选择图片参数tempFilePaths循环调用wx.uploadFile上传接口上传图片。

1、添加小程序页面 pages/upload/upload

下面是单张图片上传例子

在upload.wxml页面中添加一个按钮，一个图片容器和进度条，代码如下

<button bindtap=‘chooseImage‘>选择单张图片</button>
<view>
<image src=‘{{image}}‘ mode=‘aspectFit‘></image>
<slider max=‘100‘ min=‘0‘ value=‘{{percent}}‘  disabled=‘disabled‘></slider>
</view>

界面预览

 

2、 页面的初始数据

  data: {
    image: ‘‘,//图片地址
    percent: 0,//上传进度
  },

 

3、图片选择按钮绑定事件chooseImage

/**单张图片 */
  chooseImage: function () {
    var that = this;
    wx.chooseImage({//使用图片选择接口
      count: 1,//图片数量
      sizeType: [‘compressed‘], //original 原图，compressed 压缩图，默认二者都有
      success: function (res) 
      {
        //图片选择后执行的代码
      }
    });
  }    

参数count:1可选图片个数是1个， sizeType，可以是[‘compressed‘]，[‘original‘]或[‘original‘]，‘compressed‘]

 

4、上传接口wx.uploadFile集成

/* 向服务器请求或提交数据
parms 为小程序请求对象参数
success为请求成功后的回调数据
fail为请求失败后的回调数据
*/
var uploadFile = function (parms, success, fail) {
  if (!(typeof (parms) == ‘object‘ && parms.url)) {//parms必须为object格式类型数据，且必须提供url属性
    if (typeof (fail) == ‘function‘) {
      fail({ error: 1, message: ‘通信错误‘ });
    } else {
      throw Error(‘参数错误‘);
    }
  }
  //提交请求
  return wx.uploadFile(utils.extend({
    formData: setparms(parms.formData),
    complete: function (res) {
      turnResult(res, success, fail);
    }
  }, parms));
};

 参数 parms为小程序接口wx.uploadFile的Object参数，其它url为必填参数

下面为url参数判断代码，如果没有填写，就调用失败函数或抛出异常。

  if (!(typeof (parms) == ‘object‘ && parms.url)) {//parms必须为object格式类型数据，且必须提供url属性
    if (typeof (fail) == ‘function‘) {
      fail({ error: 1, message: ‘通信错误‘ });
    } else {
      throw Error(‘参数错误‘);
    }
  }

utils.extend(ojbect,object),为JSON对象合并函数。下面为实现代码

//json数据合并
var extend = function (target, source) {
  for (var p in source) {
    if (source.hasOwnProperty(p)) {
      target[p] = source[p];
    }
  }
  return target;
};

 setparms(object)，功能主要有
A、为服务请求参数的字符型数据进行encodeURIComponent编码，防止参数中有html,js等代码让服务器接收参数抛出异常。
B、为请求参数加个appid,时间戳、随机数和服务器请求数据签名。

/**处理请求参数 */
var setparms = function (data) {
  data = data ? data : {};
  var keys = Object.keys(data);
  var i = 0;
  for (i in keys) {
    if (typeof (data[keys[i]]) == ‘string‘) {//encodeURI 防止提交html,js等代码，服务器出错
      data[keys[i]] = encodeURIComponent(data[keys[i]]);
    }
  };
  //提交数据，添加paddid,时间戳，随机数
  utils.extend(data, {
    appid: appId,
    timestamp: utils.timestamp(),
    nonce: utils.random()
  });

  //sign签名
  utils.extend(data, {
    sign: getSign(data)
  });
  return data;
};

 getSign（object)为签名算法函数，实现过程为各请求参数和秘钥appsecret（小写）按字母顺序排序后进行md5加密。 实现代码如下

/**获取签名 */
var getSign = function (parms) {
  var sortparms = ‘‘;
  if (parms && typeof (parms) == ‘object‘) {
    var keys = Object.keys(parms);
    keys.push(‘appsecret‘);//appsecret不作为参数向服务器提交
    keys.sort();
    var i = 0;
    for (i in keys) {
      var val = parms[keys[i]] == undefined ? ‘‘ : parms[keys[i]] + ‘‘;
      if (keys[i] == ‘appsecret‘) {
        val = appSecret;
      }
      if (val != ‘‘) {
        if (sortparms.length > 0) {
          sortparms += ‘&‘;
        }
        sortparms += keys[i] + ‘=‘ + val;
      }
    }
  }
  //md5加密
  return md5(sortparms);
};

turnResult(res, success, fail);接口调用成功或失败后执行的代码

//返回数据处理
var turnResult = function (res, success, fail) {
  var data = {};
  if (res.statusCode == 200 && typeof (res.data) == ‘object‘) {
    data = res.data;
  } else {
    if (typeof (res.data) == ‘string‘ && res.data.indexOf(‘{‘) == 0) {
      data = JSON.parse(res.data);
    } else {
      data = { error: 1, message: res.data };
    }
  }
  var data = res.data;
  if (typeof (data) == ‘string‘) {
    if (data.indexOf(‘{‘) == 0) {//为json数据
      data = JSON.parse(data);
    } else {
      data = { error: 1, message: data };
    }
  }
  if (data && data.error == 0) {
    if (typeof (success) == ‘function‘) {
      if (data) {
        success(data);
      } else {
        success();
      }
    } else {
      var msg = res.message || ‘成功‘;
      wx.showToast({
        title: msg,
        icon: ‘success‘,
        duration: 2000
      });
    }
  } else {
    data = data || { error: 1, message: ‘通信错误‘ };
    if (typeof (fail) == ‘function‘) {
      fail(data);
    } else {
      wx.showToast({
        image: ‘/images/icon/error.png‘,
        title: data.message || ‘请求失败‘,
        duration: 2000
      });
    };
  }
};

 

上篇文章与服务器通信中的函数都有改动，如果您看了，请按照这篇文章中的函数进行更新。

图片选择按钮绑定事件chooseImage图片选择成功后，完整的代码如下

/**单张图片 */
  chooseImage: function () {
    var that = this;
    wx.chooseImage({//使用图片选择接口
      count: 1,//图片数量
      sizeType: [‘compressed‘], //original 原图，compressed 压缩图，默认二者都有
      success: function (res) 
      {//图片选择后执行的代码
        that.setData({ image: res.tempFilePaths[0] });
        let uploadTask = api.uploadFile({
          url: api.url.upload, //仅为示例，非真实的接口地址
          filePath: res.tempFilePaths[0],
          name: ‘file‘,
          formData: {
            ‘folder‘: ‘test‘,
            ‘watermark‘: 1
          }
        }, function (result) {
          if (result.error == 0) {
            that.setData({ image: result.data });
          };
        }, function (result) {
          that.setData({ image: ‘‘ });
        });
        uploadTask.onProgressUpdate((res) => {
          that.setData({ percent: res.progress });
        });
      }
    });
  }

 

二、服务器接口

1、服务器接口主要实现接收数据和图片保存。接收的参数有folder图片保存文件夹和watermark图片是否加水印

/// <summary>
        /// 上传
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public JsonResult upload(string folder, int watermark)
        {
            var files = this.Request.Files;
            var path = "";
            Entity.AttachmentInfo attachmentInfo = null;
            if (files.Count > 0)
            {
                try
                {
                    Common.Upload uploadFile = new Common.Upload();
                    attachmentInfo = uploadFile.save(folder, files.Get(0), watermark == 1);
                    path = attachmentInfo.Path;
                }
                catch (Exception ex)
                {
                    return getResult(bitcms.Entity.Error.错误, ex.ToString());
                }
            }
            return getResult(bitcms.Entity.Error.请求成功, "上传成功", string.Format("{0}{1}", this.config.SiteDomain, Utils.trimStart(path, "/")));
        }

 

三、源码下载

源码中包含多张图片上传，下载地址 https://pan.baidu.com/s/1qZU4WgO 密码：sojk

四、小记

1、如何跳过域名校验

在微信开发者工具中，可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。

就是在开发过程中，可以不使用ssl配置测试地址。微信开发者工具可做如下设置

 

---

感谢您的阅读。如果觉得有用的就请各位大神高抬贵手“推荐一下”吧！你的精神支持是博主强大的写作动力。

作者：逐月 《bitcms内容管理系统》开源系统  网站地址：www.bitcms.net

由于博主的水平有限，不足和错误之处在所难免，希望大家能够批评指出。

本文版权归作者和博客园所有，欢迎转载，但未经作者同意，必须保留此段声明，且在文章页面醒目位置显示原文连接，否则保留追究法律责任的权利。