Flutter学习之阿里云Oss图片上传功能开发

1、阿里云目前未针对Flutter开发相关的集成功能，但是可以利用PostObject方式通过表单的形式来上传 ，PostObject方式上传图片官方文档：https://help.aliyun.com/document_detail/31988.html

注意：调用方式可以直接使用主用户的accesskeyId 、accessKeySecret ，不用单独写接口，但是存在安全问题，不推荐使用；推荐使用子用户STS方式，由后台接口提供临时用户的accesskeyId 、accessKeySecret 、securityToken（注意l临时用户上传是securityToken必传，传值时key为“x-oss-security-token”）；参数中的signature是由accessKeySecret 经过一定的运算计算出来的；参数policy中的过期时间expiration可设置临时用户接口中返回的参数的有效期，建议在接口中计算好后直接返回该参数

2、相关工具类：

import 'dart:convert'; import 'package:crypto/crypto.dart'; import 'dart:math'; /* * Oss工具类 * PostObject方式上传图片官方文档：https://help.aliyun.com/document_detail/31988.html */ class OssUtil { // static String accesskeyId = '******';//Bucket 拥有者的accesskeyId 。 // static String accessKeySecret = '******';//Bucket 拥有者的accessKeySecret。 static String accesskeyId = '';//临时用户的AccessKeyId，通过后台接口动态获取 static String accessKeySecret = '';//临时用户的accessKeySecret，通过后台接口动态获取 static String stsToken="";//临时用户鉴权Token,临时用户认证时必传，通过后台接口动态获取 //验证文本域 static String _policyText = '{"expiration": "2069-05-22T03:15:00.000Z","conditions": [["content-length-range", 0, 1048576000]]}';//UTC时间+8=北京时间 //进行utf8编码 static List<int> _policyText_utf8 = utf8.encode(_policyText); //进行base64编码 static String policy= base64.encode(_policyText_utf8); //再次进行utf8编码 static List<int> _policy_utf8 = utf8.encode(policy); // 工厂模式 factory OssUtil() => _getInstance(); static OssUtil get instance => _getInstance(); static OssUtil _instance; OssUtil._internal() { } static OssUtil _getInstance() { if (_instance == null) { _instance = new OssUtil._internal(); } return _instance; } /* *获取signature签名参数 */ String getSignature(String _accessKeySecret){ //进行utf8 编码 List<int> _accessKeySecret_utf8 = utf8.encode(_accessKeySecret); //通过hmac,使用sha1进行加密 List<int> signature_pre = new Hmac(sha1, _accessKeySecret_utf8).convert(_policy_utf8).bytes; //最后一步，将上述所得进行base64 编码 String signature = base64.encode(signature_pre); return signature; } /** * 生成上传上传图片的名称 ,获得的格式:photo/20171027175940_oCiobK * 可以定义上传的路径uploadPath(Oss中保存文件夹的名称) * @param uploadPath 上传的路径 如：/photo * @return photo/20171027175940_oCiobK */ String getImageUploadName(String uploadPath,String filePath) { String imageMame = ""; var timestamp = new DateTime.now().millisecondsSinceEpoch; imageMame =timestamp.toString()+"_"+getRandom(6); if(uploadPath!=null&&uploadPath.isNotEmpty){ imageMame=uploadPath+"/"+imageMame; } String imageType=filePath?.substring(filePath?.lastIndexOf("."),filePath?.length); return imageMame+imageType; } /* * 生成固定长度的随机字符串 * */ String getRandom(int num) { String alphabet = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'; String left = ''; for (var i = 0; i < num; i++) { // right = right + (min + (Random().nextInt(max - min))).toString(); left = left + alphabet[Random().nextInt(alphabet.length)]; } return left; } /* * 根据图片本地路径获取图片名称 * */ String getImageNameByPath(String filePath) { return filePath?.substring(filePath?.lastIndexOf("/")+1,filePath?.length); } }

3、使用方式：

import 'package:flutter/material.dart'; import 'dart:convert'; import 'package:fluttertoast/fluttertoast.dart'; import 'package:image_picker/image_picker.dart'; import 'package:flutterdemo/page/util/CommonUtil.dart'; import 'package:flutterdemo/util/LogUtil.dart'; import 'package:flutterdemo/network/ApiService.dart'; import 'package:flutterdemo/model/OssTokenDataModel.dart'; import 'package:flutterdemo/util/oss/OssUtil.dart'; /* *我的相册 */ class MyPhotoPage extends StatefulWidget { MyPhotoPage(); State<StatefulWidget> createState() => new _MyPhotoPageState(); } class _MyPhotoPageState extends State<MyPhotoPage> { String filePath; _MyPhotoPageState(); @override void initState() { LogUtil.init(isDebug: true, tag: "****MyPhotoPage****"); } @override Widget build(BuildContext context) { Widget _sectionAdd = Container( child: IconButton( iconSize: 60, onPressed: () { _selectImage(); }, icon: Icon(Icons.add)), ); Widget _sectionImage = Container( width: 1000, height: 500, child: Image.asset("$filePath"), ); Widget _body = Container( child: Column( children: <Widget>[ filePath != null ? _sectionImage : Container(), _sectionAdd, ], ), ); return new MaterialApp( theme: CommonUtil.getThemeData(), home: new Scaffold( appBar: new AppBar( title: new Text('我的相册'), centerTitle: true, leading: IconButton( icon: Icon(Icons.arrow_back, color: Colors.white), onPressed: onBack), actions: <Widget>[new Container()], ), body: _body, ), ); } /* * 返回事件 */ void onBack() { Navigator.pop(context); } /* * 读取本地图片路径 */ Future _selectImage() async { var image = await ImagePicker.pickImage(source: ImageSource.gallery); if (image != null) { setState(() { LogUtil.i(image.path); filePath = image.path ?? ""; _getOssToken(); }); } } /* * 获取OssToken */ void _getOssToken() async { await ApiService.getOssToken(context).then((data) { LogUtil.i("----开始获取 getOssToken()----"); Map<String, dynamic> userMap = json.decode(data.toString()); OssTokenDataModel baseModel = OssTokenDataModel.fromMap(userMap); if (baseModel != null && baseModel.data != null) { //已经获取到OssToken var _sign = baseModel.data; LogUtil.i("getOssToken=" + baseModel.toString()); OssUtil.accesskeyId = _sign.accessKeyId; OssUtil.accessKeySecret = _sign.accessKeySecret; OssUtil.stsToken = _sign.securityToken; } else { Fluttertoast.showToast(msg: "Token获取异常"); } }).then((data) { LogUtil.i("----开始上传图片----"); _uploadImage(); }); } void _uploadImage() async { String uploadName = OssUtil.instance.getImageUploadName("photo", filePath); await ApiService.uploadImage(context, uploadName, filePath).then((data) { LogUtil.i("----上传图片完成----data：" + data?.toString()); if (data == null) { Fluttertoast.showToast(msg: "图片上传成功"); } }).then((data) { //更新数据库中数据 }); } }

4、接口方法文件：

import 'package:flutter/material.dart'; import 'package:flutterdemo/network/NetUtils.dart'; import 'package:flutterdemo/network/Api.dart'; import 'dart:io'; import 'package:dio/dio.dart'; import 'package:flutterdemo/util/oss/OssUtil.dart'; /* * 接口请求方法 * 封装了传参方式及参数 */ class ApiService { /* * 获取OSS Token */ static Future<dynamic> getOssToken(BuildContext context, {cancelToken}) async { return NetUtils.instance .post(context, API.URL_TOKEN, data: null, cancelToken: cancelToken); } static Future<dynamic> uploadImage( BuildContext context, String uploadName, String filePath, {cancelToken}) async { BaseOptions options = new BaseOptions(); options.responseType = ResponseType.plain; //必须,否则上传失败后aliyun返回的提示信息(非JSON格式)看不到 //创建一个formdata，作为dio的参数 File file = new File(filePath); FormData data = new FormData.from({ 'Filename': uploadName,//文件名，随意 'key': uploadName, //"可以填写文件夹名（对应于oss服务中的文件夹）/" + fileName 'policy': OssUtil.policy, 'OSSAccessKeyId':OssUtil.accesskeyId,//Bucket 拥有者的AccessKeyId。 'success_action_status': '200',//让服务端返回200，不然，默认会返回204 'signature': OssUtil.instance.getSignature(OssUtil.accessKeySecret), 'x-oss-security-token':OssUtil.stsToken,//临时用户授权时必须，需要携带后台返回的security-token 'file': new UploadFileInfo(file, OssUtil.instance.getImageNameByPath(filePath))//必须放在参数最后 }); return NetUtils.instance .post(context, API.URL_UPLOAD_IMAGE_OSS, data: data, options: options); } }

5、接口地址文件：

import 'package:flutterdemo/network/UrlConstant.dart'; import 'package:flutterdemo/util/oss/OssConstant.dart'; /* * 接口地址 * **/ class API { //获取OSS Token static final String URL_TOKEN= "****/getAliyunOssToken"; //获取OS上传图片服务器地址 static final String URL_UPLOAD_IMAGE_OSS= "http://bucketName.oss-cn-beijing.aliyuncs.com"; }

6、网络请求工具类封装：

import 'package:flutter/material.dart'; import 'dart:io'; import 'dart:convert'; import 'package:dio/dio.dart'; import 'package:fluttertoast/fluttertoast.dart'; import 'package:flutterdemo/Config.dart'; import 'package:flutterdemo/network/UrlConstant.dart'; import 'package:flutterdemo/network/interceptor/TokenInterceptor.dart'; import 'package:flutterdemo/network/interceptor/ErrorInterceptor.dart'; import 'package:flutterdemo/network/interceptor/HeaderInterceptor.dart'; import 'package:flutterdemo/network/Code.dart'; import 'package:flutterdemo/page/util/NavigatorUtils.dart'; import 'package:flutterdemo/util/TextUtils.dart'; import 'package:flutterdemo/model/base/BaseModel.dart'; import 'package:common_utils/common_utils.dart'; /* * Http请求配置工具类 */ class NetUtils { static BuildContext context = null; BaseOptions _options; Dio dio; // 工厂模式 factory NetUtils() => _getInstance(); static NetUtils get instance => _getInstance(); static NetUtils _instance; NetUtils._internal() { //初始化 dio = getDio(); } static NetUtils _getInstance() { LogUtil.init(isDebug: false,tag: "****NetUtils****"); if (_instance == null) { _instance = new NetUtils._internal(); } return _instance; } /** * 获取dio实例,不配置根url，完全使用传入的绝对路径url */ Dio getDio({String url, BaseOptions options}) { if (options == null) { if (TextUtils.isEmpty(url) || (!url.startsWith("http://") && url.startsWith("https://"))) { _options = new BaseOptions( baseUrl: UrlConstant.BASE_URL, connectTimeout: 15000, receiveTimeout: 15000, contentType: ContentType.parse("application/x-www-form-urlencoded"), ); } else { _options = new BaseOptions( connectTimeout: 15000, receiveTimeout: 15000, contentType: ContentType.parse("application/x-www-form-urlencoded"), ); } } else { _options = options; } Dio _dio = new Dio(_options); // _dio.interceptors.add(new TokenInterceptor());//待完善 // _dio.interceptors.add(new ErrorInterceptor(_dio));//待优化 _dio.interceptors.add(new HeaderInterceptor()); // _dio.interceptors.add(new LogInterceptor()); setProxy(_dio); return _dio; } /** * 设置代理 * */ void setProxy(Dio dio) { //debug模式且为wifi网络时设置代理 if (Config.debug) { //debug模式下设置代理 (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) { //设置代理 client.findProxy = (uri) { return "PROXY " + UrlConstant.PROXY_URI; }; }; } } post(BuildContext context, url, {data, BaseOptions options,cancelToken}) async { LogUtil.v('启动post请求 url：$url ,body: $data'); Response response; try { if (url != null && (url.startsWith("http://") || url.startsWith("https://"))) { dio = getDio(url: url,options: options); } response = await dio.post(url, data: data, cancelToken: cancelToken); LogUtil.v('post请求成功 response.data：${response.toString()}'); } on DioError catch (e) { if (CancelToken.isCancel(e)) { LogUtil.v('post请求取消:' + e.message); } LogUtil.v('post请求发生错误：$e'); } return response; //response.data.toString()这种方式不是标准json,不能使用 } get(BuildContext context, url, {data,BaseOptions options,cancelToken}) async { LogUtil.v('启动get请求 url：$url ,body: $data'); Response response; try { if (url != null && (url.startsWith("http://") || url.startsWith("https://"))) { dio = getDio(url: url,options: options); } response = await dio.get(url, queryParameters: data, cancelToken: cancelToken); LogUtil.v('get请求成功 response.data：${response.toString()}'); } on DioError catch (e) { if (CancelToken.isCancel(e)) { LogUtil.v('get请求取消:' + e.message); } LogUtil.v('get请求发生错误：$e'); } return response; } }