mui开发H5+app——原生选择系统相册图片上传七牛云

原创
2018/05/25 16:45
阅读数 3.7K

要完成用MUI 拍照和从系统相册选择图片上传的功能,可以理解成有三个功能

1 调用手机相机的功能(可以查看官方API  http://www.html5plus.org/doc/zh_cn/camera.html)

2 调用系统相册的功能(可以查看官方API  http://www.html5plus.org/doc/zh_cn/gallery.html)

3 照片资源上传到服务(可以查看官方API  http://www.html5plus.org/doc/zh_cn/uploader.html)

完整实例

流程:获取七牛云token => 选择图片  => 上传图片 =>返回key。

代码如图

upImg: function() {
	   this.getToken(); //获取token
	   var _this = this;
		console.log(_this.token);
		// 从相册获取图片						
		plus.gallery.pick(function(ret) {
         // 获取图片名称
			var path = ret;
			var file = ret.substr(ret.lastIndexOf("/") + 1);
			var token = _this.token; // 填写你的七牛上传令牌
		   // 上传图片
		   var url = "http://upload-z2.qiniup.com";
			document.getElementById('img').src = path;
			this.ajaxUp(token, file, url, path);
			});
	}

一、获取七牛云token

此项目因使用七牛云,所以后端选择PHP的TP5框架。

1.将七牛云的第三方SDK放至tp5框架中,参考https://developer.qiniu.com/kodo/sdk/1241/php

2.配置AK和SK,写好后端接口

代码如图:

<?php
namespace app\index\controller;

# 下载sdk包解压并改名为qiniuyun,放在vendor目录下,引入qiniuyun目录下的autoload.php文件
require_once VENDOR_PATH . 'qiniuyun/autoload.php';

use think\Controller;
use \Qiniu\Auth;

/**
 * 直接通过前端上传文件到七牛云储存空间(文件小于4MB)
 *
 * 上传token应先生成,并填写到上传表单的隐藏域,表单提交地址目前固定为:http://up-z2.qiniup.com
 *
 *     <form method="post" action="http://up-z2.qiniup.com" enctype="multipart/form-data">
 *         <input name="token" type="hidden" value="上传token">
 *         <input name="file" type="file" />
 *         <input type="submit" value="上传"/>
 *     </form>
 *
 * 上传成功后会返回包含key的json数据,可根据该key生成文件的获取地址(地址存数据库)
 */
class Qiniuyun extends Controller
{
    private $accessKey = '你的AK'; # accessKey
    private $secretKey = '你的SK'; # secretKey
    private $bucket = '你的空间'; # 存储空间名称
    private $domain = '空间对应域名'; # 域名(与上面存储空间对应)
    public $auth; # auth对象

    public function _initialize()
    {
        if (!$this->auth) {
            $this->auth = new Auth($this->accessKey, $this->secretKey);
        }
        return $this->auth;
    }

    /**
     * 获取上传token
     * @return string
     */
    public function getToken()
    {
        return $this->auth->uploadToken($this->bucket);
    }

    /**
     * 获取文件访问地址
     * @param  string $key 文件上传成功后返回的key
     * @return string
     */
    public function getUrl($key)
    {
        $baseUrl = 'http://' . $this->domain . '/' . $key;
        return $this->auth->privateDownloadUrl($baseUrl);
    }
}

前端请求后端接口获取token(请求开发者服务器)

代码如图:

/**获取token凭证,上传前无凭证无法上传**/
						getToken: function() {
							var _this = this;
							mui.ajax('https://XXXXX/index/upload/getToken', {
								data: {},
								dataType: 'jsonp',
								type: 'post',
								timeout: '10000',
								success: function(res) {
									//此步骤打印出返回的token  观察是否存在双引号
									_this.token = res.replace(/\"/g,"");//去双引号 (无双引号可省略)
									console.log(res);
								},
								error: function(xhr, type, errorThrown) {
									plus.nativeUI.toast('网络请求错误');
									console.log(errorThrown);
								}
							});
						}

3.请求七牛云服务器,上传图片

代码如图:

/**
						 * 上传图片
						 * @param token(str) 上传token 由七牛返回
						 * @param file(str)  文件名
						 * @param url(str)   请求路径
						 * @param path(file) 文件对象
						 **/
						ajaxUp: function(token, file, url, path) {
							var _this = this;
							var uploader = plus.uploader.createUpload(url, {
								method: "POST"
							}, function(up, state) {
								
								var res = JSON.parse(up.responseText);
								if(state == 200){
									document.getElementById('imgUrl').value = _this.imgUrl+res.key;
									console.log("上传成功"+ res.key);
								}	
								else{
									console.log("上传失败 - " + state);
								}	
							});
							/**
							 * * 上传参数addData
							 * * 上传文件addFile
							 * * 请勿将二者弄混   addFile上传的是文字对象  addData上传为字符串
							 * */
							uploader.addData("key", file);
							uploader.addData("token", token); //添加上传参数  token必填
							uploader.addFile(path, {
								"key": "file"
							}); // 固定值,千万不要修改
							uploader.start();
						}

html部分

	<!--这个是表单提交的方法-->
			<!--<form method="post" action="http://up-z2.qiniup.com" enctype="multipart/form-data">
				<input name="token" type="text" :value="token">
				<input name="file" type="file" accept="image/*" @click="getToken()"/>
				<input type="submit" value="上传"/>
			</form>-->
 				<!--这个是调用原生接口的方法-->
			<img class="my_img_class" width="100px" height="100px" @click="upImg" id="img" src=""/>
			<p>
				此input只做演示,实际应用时 input应为隐藏
			<input type="text" name="imgUrl" id="imgUrl" value="" />
			</p>

最后

通过七牛云上传图片后,将返回的key保存,然后获取对应的图片路径。

注意事项:

1.七牛云空间所在地区。七牛云空间所处地区不同,请求的URL也不一样,本人是华南的空间,因此路径为http://upload-z2.qiniup.com(是客户端路径不是服务器端路径)

2.H5+手机原生上传组件 addData与addFile的使用。上传的图片是对象,因此图片应使用addFile,但七牛云需要我们上传字段,所以上传的字段我们使用addData

3.返回的token。调试时请打印返回的token,观察token是否带有“”,有则去掉。否则接口会报401错误

结尾

本文为手机H5+APP开发中图片上传解决思路,并非最好的方法,仅列出常见问题,因系统差异问题,ios与安卓所遇问题不一定相同。

展开阅读全文
mui
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部