uni-app实现七牛云图片的云上传

　　uni-app项目对于手机图片的存取通常有两种办法，其一是将图片资源放在服务器下单独开辟的资源文件夹中，然后通过获取图片在服务器的地址来加载图片。但是这种做法对服务器的带宽要求比较大，也会增加服务器的负载。由于我的云服务器性能不佳，采用这种方法会虽然能使图片加载，但是加载速度太慢，影响用户体验。

　　要实现图片的快速上传和加载，我们可以用第二种办法，也就是利用云服务器的相关功能来实现，这里我选择七牛云。

　　七牛云图片的上传过程需要后端和前端的相互配合，后端传给前端从七牛云获取的token，前端利用这个token验证身份后可以进行相关的上传操作。当然上传的过程可以完全交给后端，前端可以返回给后端你选择的图片转化后的base64编码，后端再进行上传工作。但由于图片的选择是前端的接口实现的，在前端进行上传操作会方便许多，也不需要将图片的格式进行转化就可以直接进行上传。故本博客上传图片利用前端进行。

　　首先先实现后端获取token的接口。代码中accessKey和secretKey是七牛云提供给你的密匙，去你七牛云的账号当中粘贴即可。bucket指的是你在七牛云中创建的存储空间的名字。

public class QiNiu {

  private static String accessKey = ""; 
  private static String secretKey = "";  //七牛云提供的密匙
  private static String bucket = "";     //存储空间名

  /**
   * 获取上传凭证
   */
  public static String getUploadCredential() {
      Auth auth = Auth.create(accessKey, secretKey);
      String upToken = auth.uploadToken(bucket);
      System.out.println(upToken);
      return upToken;
  }
}

　　这样接口就写完了，是不是很简单呢？现在后端只要写个servlet前端就可以调用了。

　　String token = getUploadCredential();

　　接下来写一下前端的操作，前端首先要向后台请求token，然后再请求七牛云的图片上传地址，将自己选择的图片上传即可。这里写一下手机端上选择相册中图片的代码。

uni.chooseImage({
	    count: 1, //默认9
	    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
	    sourceType: ['camera','album'], //从相册选择
	    success: function (res) {						
			that.txUrl=res.tempFilePaths[0];
			var img = res.tempFilePaths[0];//imgurl 就是你的图片路径
          var key = Math.round(new Date() / 1000); //随机生成关键字
}）
			

　　上传成功后的图片会存在你的七牛云空间里面，但是在此之前，你得先为你的七牛云空间添加一个域名，作为图片存储的地址前缀url，然后自定义一个关键字key作为图片存储的地址后缀，上传成功后，url+key就是你的图片的存储地址。上传代码如下。

uni.request({
	url: '***/getToken.do',
	method: 'POST',
	data: {},
	header: { 'content-type': 'application/x-www-form-urlencoded'} ,
		success: (res) => {	
			let resData = res.data;
			let getToken = resData.token;

			uni.uploadFile({
			url: 'https://up.qbox.me',  //七牛云华东区上传地址
			filePath: img,              //图片在本地的地址
			name: 'file',
			formData: {
				key: key,               //图片存储地址后缀
				token: getToken         //后台传给前端的token
			},
			success: result => {
				let ImgUrl = '你的存储地址前缀url' + '/' + key;   //图片的存储地址
				//图片上传成功后的操作
			}
			}）
		}
})

　　到此为止，图片的上传就成功了，你就可以利用图片的存储地址进行对图片资源的加载了。