nyx: oss上传功能

更新： 添加基本的oss上传功能
包括如下两部分：
1. 或者OSS访问的token
2. 添加相关内容
- 需上传图片
- 图片标签（tag）
- 图片标题（title）
- 图片内容（content）

增值产品-小程序及app/nyx-master/app.js

-//app.js
+//app.js
@@ -42,7 +42,7 @@ App({
     //文件上传数据格式
     postData : {
       photoArray: [],
-      photoTag: [],
+      photoTag: "",
       photoTitle: "",
       photoContent: "",
       photoCategory: "",

增值产品-小程序及app/nyx-master/pages/map/map.wxss

-.page{
+.page{
 .page{
     height: 100vh;
-    background: #F4F8FB;
+    background-color:#f5f8fa;
 }
 .top{
   width:100%;

增值产品-小程序及app/nyx-master/pages/post/edit/edit.js

+// pages/post/edit/edit.js
+// pages/post/edit/edit.js
+var config = wx.getStorageSync("config");
+var app = getApp();
+
+Page({
+  onLoad: function () {
+    var that = this;
+    wx.getSystemInfo({
+      success: function (res) {
+        var a = res.windowHeight;
+        that.setData({
+          scrollTop: a-200
+        })
+      }
+    })
+  },
+  onReady: function (e) {
+  },
+
+  // Page Flow
+  navigateToSubmit() {
+    wx.navigateTo({ url: './../submit/submit' })
+  },
+
+  // Date Flow
+  // 输入该组图片的标签
+  bindKeyInput(e) {
+    var _this = this;
+    _this.setData({
+      inputValue: e.detail.value
+    })
+    //全局赋值
+    app.globalData.postData.photoTag = e.detail.value
+  },
+
+
+})
+

增值产品-小程序及app/nyx-master/pages/post/edit/edit.json

+{
+{
+    "navigationBarTitleText": "添加标签"
+}
\ No newline at end of file

增值产品-小程序及app/nyx-master/pages/post/edit/edit.wxml

+<!-- /page/post/edit/edit 添加分类的标签，以及自定义标签 -->
+<!-- /page/post/edit/edit 添加分类的标签，以及自定义标签 -->
+<view class="page" style="height:100%;width:100%">
+  <block>
+    <navigator url="/pages/post/submit/submit" hover-class="navigator-hover">
+      <button type="default">下一步</button>
+    </navigator>
+  </block>
+
+  <view class="weui-cells__title">#添加标签</view>
+  <view class="weui-cells weui-cells_after-title">
+      <view class="weui-cell ">
+          <view class="weui-cell__bd">
+              <input class="weui-input" bindinput="bindKeyInput" placeholder="请输入标签" />
+          </view>
+      </view>
+  </view>
+    
+</view>
\ No newline at end of file

增值产品-小程序及app/nyx-master/pages/post/edit/edit.wxss

+page{
+page{
+    height: 100%;
+    background-color:#f5f8fa;
+}
+
+.post{
+    position: absolute;
+    bottom: 0;
+    right:0px;
+}
\ No newline at end of file

增值产品-小程序及app/nyx-master/pages/post/post.js

+// pages/post/post.js
+// pages/post/post.js
+var config = wx.getStorageSync("config");
+var app = getApp();
+
+var log = require('./../../utils/log.js')
+var util = require('./../../utils/util.js')
+
+/*
+提交流程
+1. post.js 生成图片的临时路径
+2. edit.js 编辑标签
+3. submit.js 上传阿里云oss， 将内容上传到数据库
+  - 获取token
+  - 上传oss
+  - 上传数据库
+
+*/
+
+const base64 = require('../../utils/base64.js');//Base64,hmac,sha1,crypto相关算法
+Page({
+  onLoad: function () {
+    var that = this;
+    wx.getSystemInfo({
+      success: function (res) {
+        var a = res.windowHeight;
+        that.setData({
+          scrollTop: a-200
+        })
+      }
+    })
+  },
+  data: {
+    photoArray: [],
+    sourceTypeIndex: 2,
+    sourceType: ['拍照', '相册', '拍照或相册'],
+
+    sizeTypeIndex: 2,
+    sizeType: ['压缩', '原图', '压缩或原图'],
+
+    countIndex: 8,
+    count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+  },
+
+  sourceTypeChange(e) {
+    this.setData({
+      sourceTypeIndex: e.detail.value
+    })
+  },
+  sizeTypeChange(e) {
+    this.setData({
+      sizeTypeIndex: e.detail.value
+    })
+  },
+  countChange(e) {
+    this.setData({
+      countIndex: e.detail.value
+    })
+  },
+
+  //在进入页面时就执行，用于初始化
+  onReady: function (e) {
+
+  },
+
+  // Page Flow
+  navigateToEdit() {
+    wx.navigateTo({ url: './edit/edit' })
+  },
+
+  // Date Flow
+  /*
+    step1: 选定图片，可以预览
+    step2: 添加描述文字，选择tag
+    step3: 上传
+
+  */
+  addPhoto: function (res) {
+    var _this = this;
+    console.log("===this is addPhoto");
+    wx.chooseImage({
+      sizeType: ['original, compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+      success: function (res) {
+        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+        // 文件的临时路径，在小程序本次启动期间可以正常使用
+        // tips,如果想长期保持，可通过wx.saveFile
+        var tempFilePaths = res.tempFilePaths;
+        _this.setData({
+          photoArray: tempFilePaths
+        })
+        app.globalData.postData.photoArray = tempFilePaths;
+      }
+    })
+  },
+  previewImage(e) {
+    const current = e.target.dataset.src
+    wx.previewImage({
+      current,
+      urls: this.data.photoArray
+    })
+  },
+
+})

增值产品-小程序及app/nyx-master/pages/post/post.json

+{
+{
+    "navigationBarTitleText": "分享你的精彩"
+}
\ No newline at end of file

增值产品-小程序及app/nyx-master/pages/post/post.wxml

+<view class="page" style="height:100%;width:100%">
+<view class="page" style="height:100%;width:100%">
+    <block>
+      <navigator url="/pages/post/edit/edit" hover-class="navigator-hover">
+        <button type="default">下一步</button>
+      </navigator>
+    </block>
+
+    <view class="page-body">
+    <form>
+      <view class="page-section">
+
+      <!--   <view class="weui-cells weui-cells_after-title"> -->
+          <!-- 选择图片来源 -->
+          <!-- <view class="weui-cell weui-cell_input">
+            <view class="weui-cell__hd">
+              <view class="weui-label">图片来源</view>
+            </view>
+            <view class="weui-cell__bd">
+              <picker range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}" mode="selector">
+                <view class="weui-input">{{sourceType[sourceTypeIndex]}}</view>
+              </picker>
+            </view>
+          </view> -->
+
+          <!-- 选择图片质量 -->
+          <!-- <view class="weui-cell weui-cell_input">
+            <view class="weui-cell__hd">
+              <view class="weui-label">图片质量</view>
+            </view>
+            <view class="weui-cell__bd">
+              <picker range="{{sizeType}}" bindchange="sizeTypeChange" value="{{sizeTypeIndex}}" mode="selector">
+                <view class="weui-input">{{sizeType[sizeTypeIndex]}}</view>
+              </picker>
+            </view>
+          </view> 
+        </view> -->
+
+        <view class="weui-cells">
+          <view class="weui-cell">
+            <view class="weui-cell__bd">
+              <view class="weui-uploader">
+                <view class="weui-uploader__hd">
+                  <view class="weui-uploader__title">图片上传</view>
+                  <view class="weui-uploader__info">{{photoArray.length}}/{{count[countIndex]}}</view>
+                </view>
+                <view class="weui-uploader__bd">
+                  <view class="weui-uploader__files">
+                    <block wx:for="{{photoArray}}" wx:for-item="image">
+                      <view class="weui-uploader__file">
+                        <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
+                      </view>
+                    </block>
+                  </view>
+                  <view class="weui-uploader__input-box">
+                    <view class="weui-uploader__input" bindtap="addPhoto"></view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+      </view>
+    </form>
+  </view>
+</view>
\ No newline at end of file

增值产品-小程序及app/nyx-master/pages/post/post.wxss

+page{
+page{
+    height: 100vh;
+    background-color:#f5f8fa;
+}
+.banner{
+    position: relative;
+}
+.banner image{
+    height: 200px;
+    width:100%;
+}
+.post{
+    position: absolute;
+    bottom: 0;
+    right:0px;
+}
+
+
+.banner .play{
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    bottom: 10px;
+    right:10px;
+    z-index: 10;
+}
+.mdetail{
+    overflow: hidden;
+    height:55px;
+    padding:5px 10px;
+    border-bottom:1px solid #dbdbdb;
+}
+.mdetail image{
+    float:left;
+    width:55px;
+    height:55px;
+}
+.minfo{
+    float:left;
+    margin-left:10px;
+    padding:10px 0;
+    
+}
+.detailLeft{
+    float:left;
+}
+.detailRight{
+    float:right;
+}
+.mname{
+    font-size: 14px;
+    margin-bottom:10px;
+}
+.mauthor{
+    font-size: 12px;
+    color:#dbdbdb;
+}
+
+

增值产品-小程序及app/nyx-master/pages/post/submit/submit.js

+// pages/post/submit/submit.js
+// pages/post/submit/submit.js
+const base64 = require('../../../utils/base64.js');//Base64,hmac,sha1,crypto相关算法
+var config = wx.getStorageSync("config");
+var app = getApp();
+
+Page({
+  onLoad: function () {
+    var that = this;
+    wx.getSystemInfo({
+      success: function (res) {
+        var a = res.windowHeight;
+        that.setData({
+          scrollTop: a-200
+        })
+      }
+    })
+  },
+  data : {
+    //阿里云 OSS相关参数
+    accessid: "",
+    policy: "",
+    signature: "",
+    uploadUrl: "",
+    uploadUrlend: "",
+    expire: "",
+    securityToken: "",
+
+    //评论标题+内容相关参数
+    inputTitle: "",
+    inputContent: "",    
+  },
+  onReady: function (e) {
+    var _this = this;
+    _this.oss();    
+  },
+
+  // Date Flow
+  // 输入该组图片的内容
+  bindKeyInput(e) {
+    var _this = this;
+    _this.setData({
+      inputContent: e.detail.value
+    })
+  },
+
+  onSubmitPost: function (e) {
+    var _this = this;
+    var title = e.detail.value.inputTitle;//获取topc
+    var content = e.detail.value.inputContent;//获取content
+    if (content != undefined && content != "") {
+      //step1, 上传至oss-获取token,在onReady()提前准备
+      //_this.oss();
+      //step2, 上传至oss-上传图片
+      _this.releaseOss(title, content);
+      //step3, 上传信息到数据库
+
+    }
+
+  },
+
+  oss: function () {
+    var _this = this;
+    console.log("===this is oss");
+    //token信息
+    var strUrl = config.oss_token_url + "?tokenName=ios&userName=1234"
+    wx.request({
+      url: strUrl,
+      method: 'GET',
+      header: {
+        'content-type': 'application/json'
+      },
+      success: res => {
+        if (res.statusCode == 200) {
+          console.log("=== oss getToken 返回值_", res.data)
+          _this.setData({
+            accessid: res.data.data.accessid,
+            policy: res.data.data.policy,
+            signature: res.data.data.signature,
+            uploadUrl: res.data.data.host,
+            uploadUrlend: res.data.data.dir,
+            expire: res.data.data.expire,
+            securityToken: res.data.data.securityToken,
+          })
+        }
+      }
+    })
+  },
+  //上传照片(阿里云)
+  uploadAli: function (babyData, photoArr) {
+    var _this = this;
+    var uploadUrl = this.data.uploadUrl;
+    var uploadUrlend = this.data.uploadUrlend;
+    var photoArrLen = photoArr.length;
+    console.log("===this is uploadAli");
+    console.log("===uploadUrl_"+uploadUrl);
+    console.log("===uploadUrlend_" + uploadUrlend);    
+    wx.uploadFile({
+      url: uploadUrl,
+      formData: babyData,
+      name: 'file',
+      filePath: photoArr[0],
+      header: {
+        'content-type': 'multipart/form-data'
+      },
+      success: res => {
+        if (res.statusCode == 200) {
+          //表示上传成功(可以在阿里云服务器查看上传的图片)
+          _this.switchTab()
+        }
+        else
+        {
+          console.log("阿里云 oss 上传失败, error msg__", res)
+        }
+      }
+    })
+  },
+  //发布按钮
+  releaseOss: function (title, content) {
+    var _this = this;
+    console.log("===this is releaseOss");
+    //获取照片数组
+    var photoArr = app.globalData.postData.photoArray;
+    //获取时间
+    var date = this.data.date;
+    var userToken = this.data.userToken;
+    //时间搓
+    var expire = this.data.expire;
+    //获取当前时间搓
+    var expireNow = Date.parse(new Date()) / 1000;
+    //如果当前时间大于获取的时间 则重新获取oss;      
+    if (expire == undefined || expireNow > expire) {
+      //重新获取oss
+      _this.oss();
+      expire = this.data.expire;
+    }
+    //传给阿里云的参数
+    var policy = this.data.policy;
+    var accessid = this.data.accessid;
+    var securityToken = this.data.securityToken;
+    var signature = this.data.signature;
+    var uploadUrlend = this.data.uploadUrlend;
+    console.log("policy: " + policy);
+    console.log("signature: " + signature);
+    console.log("accessid: " + accessid);
+    //传给阿里云的参数-end
+    var newPhoto = '';
+    var photoArrsm = '';
+    //由于微信小程序生成的临时路径在上传阿里云的时候不需要上传.所以需要对路径进行处理,但是在手机端上传和PC端上传,图片临时路径的前缀不同,所以需要进行分别的处理
+    if (photoArr[0].indexOf('http://tmp/') != -1) {
+      photoArrsm = uploadUrlend + photoArr[0].replace('http://tmp/', "");
+    }
+    if (photoArr[0].indexOf('wxfile://') != -1) {
+      photoArrsm = uploadUrlend + photoArr[0].replace('wxfile://', "");
+    }
+
+    var tag = app.globalData.postData.photoTag
+    var category = "心情"
+    var strUrl = config.oss_callback_url
+    var callback_param = {
+      'callbackUrl': strUrl,
+      'callbackBody': 'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}&tag=' + encodeURI(encodeURI(tag)) + '&title=' + encodeURI(encodeURI(title)) + '&content=' + encodeURI(encodeURI(content)),
+      'callbackBodyType': "application/x-www-form-urlencoded",
+    }
+    var base64_callback_body = base64.encode(JSON.stringify(callback_param));
+    var babyData = {
+      'Filename': '${filename}',
+      'name': 'photoArr[0]',
+      'key': uploadUrlend + '${filename}',
+      'policy': policy,
+      'OSSAccessKeyId': accessid,
+      'success_action_status': '200', //让服务端返回200,不然，默认会返回204
+      'callback': base64_callback_body,
+      'signature': signature,
+      'x-oss-security-token': securityToken
+    }
+    this.uploadAli(babyData, photoArr)
+  },
+
+  switchTab() {
+    wx.switchTab({
+      url: '/pages/discover/discover'
+    });
+  },
+
+})

增值产品-小程序及app/nyx-master/pages/post/submit/submit.json

+{
+{
+    "navigationBarTitleText": "上传"
+}
\ No newline at end of file

增值产品-小程序及app/nyx-master/pages/post/submit/submit.wxml

+<view class="post" style="height:100%;width:100%">
+<view class="post" style="height:100%;width:100%">
+    <view class="page-body">
+    <form catchsubmit="onSubmitPost" >
+      <view class="btn-area">
+        <button type="normal" formType="submit">上传</button>
+      </view>
+
+      <view class="weui-cells__title">#添加标题</view>
+      <view class="weui-cells weui-cells_after-title">
+          <view class="weui-cell ">
+              <view class="weui-cell__bd">
+                  <input class="weui-input" name="inputTitle"  placeholder="请输入标题" />
+              </view>
+          </view>
+      </view>      
+
+      <view class="weui-cells__title">#添加内容</view>
+      <view class="weui-cells weui-cells_after-title">
+          <view class="weui-cell">
+              <view class="weui-cell__bd">
+                  <textarea class="weui-textarea" bindinput='bindKeyInput' name="inputContent" placeholder="请输入内容" style="height: 3.3em" />
+                  <view class="weui-textarea-counter">{{inputContent.length}}/300</view>
+              </view>
+          </view>
+      </view>      
+    </form>
+  </view>
+   
+</view>
\ No newline at end of file

增值产品-小程序及app/nyx-master/pages/post/submit/submit.wxss

+page{
+page{
+    height: 100%;
+    background-color:#f5f8fa;
+}
+
+.post{
+    position: absolute;
+    bottom: 0;
+    right:0px;
+}