背景

     微信小程序作为近两年腾讯退出的应用平台，具有广泛的应用场景。那么在此过程中，部分客户基于小程序进行一些数据存储和提交的程序设计和开发。本文就通过一个上传图片的小例子来说明如何和OBS对接开发。

步骤一：设置Bucket的跨越访问

   因为小程序是基于HTML+JS基础框架，在安全上继承浏览器的跨越访问安全要求。那么就需要预先在需要上传数据的桶上配置允许跨越访问

具体设置可以参考下图：

步骤 二：配置桶访问域名到小程序的上传域名白名单中

  微信小程序对于跨越访问的域名采用白名单管理机制，因此，对于需要上传的数据，需要预先设置好允许的白名单。桶的域名可以在控制台 桶--->概览地方获取

登录微信小程序平台，然后配置域名白名单 

步骤三：微信小程序图片上传技术框架

步骤四：微信小程序上传图片代码参考（整体工程参考附件内容）：

代码有参考和使用 https://www.jianshu.com/p/c1e0574ee63d 中部分代码，特此说明。

//选择图片

choiceimage: function(){

var that = this;

console.log("选择图片");

wx.chooseImage({

success: function(res) {

const imagexs =that.data.tempImagePath.concat(res.tempFilePaths);

that.setData({

tempImagePath: imagexs.length <= 5 ? imagexs : imagexs.slice(0,5)

})

// that.data.tempImagePath= imagexs.length <= 5 ? imagexs : imagexs.slice(0, 5)

// this.tempImagePath=res.tempFilePaths;

// tempImagePath : res.tempFilePaths;

console.log("选择图片成功",that.data.tempImagePath);

$digest(this)

// return tempImagePath

},

fail:function(e) {

console.log(e);

//  return null

}

})

},

//上传图片

uploadfile: function(){

var that=this;

console.log("上传图片");

if (this.tempImagePath != '') {

console.log("上传图片if");

var  tempImagePaths = that.data.tempImagePath;

console.log("上传图片if2", tempImagePaths[0]);

// this.tempImagePath = choiceimage();

for (var i in tempImagePaths) {

console.log("开始上传图片");

var filenames = that.getfilename();

var tokens = that.data.token;

console.log(tokens);

console.log("file name is ",filenames);

that.data.loading=true;

wx.uploadFile({

url: that.data.endpoint,

// method: 'POST',

filePath: tempImagePaths[0],

name: filenames,

header:{

'content-type': 'multipart/form-data; boundary=-9431149156168'

},

formData:{

'key': filenames,

'token': tokens,

// 'name': tempImagePaths[i],

'content-type': 'image/jpeg',

'success_action_status': '200'

},

success(res){

console.log(res.statusCode);

if (res.statusCode == '200'){

console.log(res.data);

wx.showToast({

title: 'upload success',

icon: 'success'

});

// wx.hideToast();

}else{

console.log("upload failed messages",res.statusCode, res.data);

wx.showToast({

title: 'upload Failed',

});

}

},

fail(e){

console.log(e)

}

})

}

} else{

console.log("无图片上传")

}

},

getfilename: function() {

var prefix ="OBS_WX_s/";

var date = Date.now() ;

console.log(prefix + date);

return prefix+date;

},

//从服务端获取token

gettoken: function() {

var that=this;

wx.request({

url: that.data.tokenurl,

method: 'GET',

// header: {

//   'content-type': 'text/plain'

// },

success(res){

console.log("获取鉴权token");

// console.log(res.data);

that.setData({

token: res.data,

});

console.log(that.data.token);

// return res.data

},

fail(e){

console.log(e)

}

})

},