```要完成用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。  

代码如图：  

```javascript  
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与安卓所遇问题不一定相同。
原文链接https://my.oschina.net/incess/blog/1818787