js提交图片到七牛云，未压缩和没有解决iphone拍照旋转问题

环境：vue.js + tp5(获取token) + 七牛云

七牛云sdk： https://developer.qiniu.com/kodo/sdk/1283/javascript

思想： 通过js直接提交图片到七牛云，获取返回地址。期间会在服务器获取七牛云token。

vue.js 需要按照七牛云js

npm install qiniu-js
var qiniu = require('qiniu-js')

vue.js代码如下

<template>

  <div>
        <div class="weui-gallery" v-bind:class="{showgallery: showgallery}">
            <span class="weui-gallery__img"  @click="closeGallery" :style="{backgroundImage:'url('+galleryimgUrl+')'}"></span>
            <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del" @click="delGallery">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-uploader">
                <div class="weui-uploader__hd">
                    <p class="weui-uploader__title">图片上传</p>
                    <div class="weui-uploader__info">{{uploadNum}}/{{allUploadNum}}</div>
                </div>
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles">

                        <li
                            v-for="(item,index) in imgList"
                            :key ="index"
                            :style="{backgroundImage:'url('+item.imgUrl+')'}"
                            @click="openGallery(index)"
                            class="weui-uploader__file weui-uploader__file_status"
                         >
                            <div class="weui-uploader__file-content">
                                <i :class="[item.uploadimg == 0 ? 'weui-loading' : (item.flag == 1 ? 'weui-icon-success' : 'weui-icon-warn')]"></i>
                            </div>
                         </li>

<!--                          <li class="weui-uploader__file weui-uploader__file_status">
                            <div class="weui-uploader__file-content">
                                <div class="weui-loading"></div>
                            </div>
                         </li> -->
                        
                    </ul>


                    <div class="weui-uploader__input-box" v-show="showUploadBtn">
                        <input id="uploaderInput" class="weui-uploader__input" v-on:change="newFileChange" type="file" accept="image/*" multiple="">
                    </div>
                </div>
            </div>
        </div>

        <div @click="getImgList">点击查看imgList的值</div>
        
  </div>

</template>

<script>
import axios from 'axios'
export default {
    name: "TestContent",
    data (){
        return {
            //所有图片列表
            imgList: [
                // { imgUrl: 'http://api.99314.com/static/images/pic_160.png', flag: 1},
                // { imgUrl: 'http://hfyd.yihuizhuang.com/uploads/allimg/180925/1-1P925160340.jpg', flag: 0},
                // { imgUrl: 'http://hfyd.yihuizhuang.com/uploads/allimg/180925/1-1P925160340-50.jpg', flag: 1}
            ],
            //是否显示 gallery
            showgallery: false,
            //gallery当前的图片地址
            galleryimgUrl: '',
            //当前点击的图片地址索引
            currentImgIndex: -1,
            //一共可以上传多少张图片
            allUploadNum: 5,
            //已经上传的图片数量
            uploadNum: 0,
            //是否显示上传按钮,当大于最大上传数量的时候,隐藏,否则显示
            showUploadBtn: true
        }
    },
    watch : {
        imgList: function(){
            this.uploadNum = this.imgList.length
            if(this.imgList.length > this.allUploadNum){
                this.imgList = this.imgList.slice(0, this.allUploadNum)
                this.$weui.toast('只能添加'+ this.allUploadNum +'张图片')
                
            }
            //当图片达到允许最大上传值 等于大于的时候,则隐藏
            if(this.imgList.length >= this.allUploadNum){
                this.showUploadBtn = false
            }else{
                this.showUploadBtn = true
            }
        }
    },
    methods: {
        getImgList (){
            console.log(this.imgList)
        },

        // 添加了图片之后触发的事件,js直接提交
        newFileChange (res){
            // console.log(res.target.files[0].name)
            // 拿到 files(数组),然后提交到后端,完成之后,把新的图片加到 imgList中去
            
            //如果获取的文件数组长度小于1,说明没有获取到,直接结束
            // 遍历数据 res.target.files, 然后挨个去上传
            const files = res.target.files

            // 这里要注意,如果选择的图片加上已经存在的图片数量大于最大上传的数量,只能上传最大数量,然后提示打到达最大的数量
            let nowUploadNum = files.length + this.imgList.length

            if(nowUploadNum > this.allUploadNum){
                // 如果已经存在的数量加上上传的数量大于 最大上传数量, 则上传 最大上传数量 - 实际存在的数量
                let trueUplaodNum = this.allUploadNum - this.imgList.length
                if(trueUplaodNum > 0){
                    
                    // 如果实际上传数量大于0, 说明还需上传
                    this.newUploadQiniu(trueUplaodNum, files)

                }else{
                    // 如果实际上传数量 不大于 0, 说明已经是最大上传数量,不上传,直接提示 已经是最大数量
                    this.$weui.alert('最大只能上传' + this.allUploadNum + '张')
                }
            }else{

                //如果现在要上传的数量加上一句存在的图片数量 小于 最大上传数量,则直接上传
                this.newUploadQiniu(files.length, files)
            }
        },

        newUploadQiniu (uploadNum, files){

            //如果文件长度小于1,表示没有文件,则不上传
            if(files.length < 1){
                return
            }

            for (let i = 0; i < uploadNum; i++) {

                // 将突破都先用blog方式传到前端
                let src, url = window.URL || window.webkitURL || window.mozURL
                if (url) {
                    src = url.createObjectURL(files[i])
                }
                //用来控制每一次点击之后,让程序知道是哪一张图片在上传
                var uploadid = this.imgList.length

                this.imgList.push({imgUrl: src, flag: 0, uploadimg: 0, uploadid: uploadid})

                //获取七牛云token
                let postData = {
                    'name' : files[i].name,
                    'uploadid' : uploadid
                }
                const qs = require('qs')
                const that = this
                axios.post(this.common.HTTPHOST+"/api/qiniu/getToken", qs.stringify(postData), {
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(function(res){
                    let retData = res.data
                    if(retData.ret == 1){
                        //获取成功
                        let token = retData.data.token
                        let uploadid = retData.data.uploadid
                        let file = files[i]
                        let key = retData.data.name
                        const qiniu = require('qiniu-js')
                        const config = {
                            useCdnDomain: true,
                            region: null
                        }
                        const putExtra = {
                            fname: "",
                            params: {},
                            mimeType: null
                        }
                        const observer = {
                            next(res){
                                // ... 进度函数
                            },
                            error(err){
                                // ...上传错误时
                                //上传失败, 将本地的图片显示在图片预览中
                                that.imgList[uploadid].uploadimg = 1 //完成上传
                                that.imgList[uploadid].flag = 0 //上传失败
                            }, 
                            complete(res){
                                // ...上传成功改变 这一条的状态
                                that.imgList[uploadid].uploadimg = 1 //完成上传
                                that.imgList[uploadid].flag = 1 //上传成功
                                that.imgList[uploadid].trueUrl = that.common.IMGHOST + '/' + res.key
                            }
                        }
                        var observable = qiniu.upload(file, key, token, putExtra, config)
                        var subscription = observable.subscribe(observer)
                        
                        // subscription.unsubscribe() // 上传取消

                    }else{
                        //获取失败
                        that.imgList[uploadid].uploadimg = 1 //完成上传
                        that.imgList[uploadid].flag = 0 //上传失败
                        that.$weui.alert('网络错误')
                    }


                }).catch(function(err){
                    console.log(err)
                })
            }


        },

        //打开 gallery
        openGallery (index){
            this.currentImgIndex = index
            this.galleryimgUrl = this.imgList[index]['imgUrl']
            this.showgallery = true
        },

        //删除gallery
        delGallery (){
            const that = this
            if(this.currentImgIndex > -1){
                //如果当前索引大于0,说明存在
                this.imgList.splice(this.currentImgIndex, 1)
                this.currentImgIndex = -1
            }
            that.$weui.toast('操作成功', {
                duration: 1000,
                callback: function(){
                    that.showgallery = false
                }
            });
        },

        //关闭gllery
        closeGallery (){
            this.showgallery = false
        }
    }
}

</script>

<style lang="stylus" scoped>
.showgallery
    display: block
// >>>.weui-uploader__file_status:before
//     background: none
// >>>.weui-uploader__file-content
//     top: 15px
//     left: 80%
</style>

---

tp5后台代码： 七牛云配置详见 之前笔记

use Qiniu\Auth;

//require 'vendor/qiniu/php-sdk/autoload.php';  //引入自动加载类
vendor('qiniu.php-sdk.autoload');

use Qiniu\Storage\UploadManager;


//获取token
public function getToken()
{
    // 获取 post.name, 对name进行,自定义命名
    $name     = $this->setNewName(input('post.name'));
    $uploadid = input('post.uploadid');

    // 构建鉴权对象
    $accessKey = config("qiniu")["accessKey"];
    $secretKey = config("qiniu")["secretKey"];
    $auth      = new Auth($accessKey, $secretKey);
    // 要上传的空间
    $bucket = config("qiniu")["bucket"];
    // 生成上传Token
    $token = $auth->uploadToken($bucket);
    if ($token) {
        show(1, '获取成功', array('token' => $token, 'name' => $name, 'uploadid' => $uploadid));
    } else {
        show(0, '获取失败');
    }
}

//对名称进行自定义
public function setNewName($str)
{
    // $str abd.jpg
    // 1. 获取.前面的字符
    $lastShowNum = strrpos($str, '.');
    $qian_str    = substr($str, 0, $lastShowNum);
    $last_str    = substr($str, $lastShowNum + 1, strlen($str));
    $newName     = substr(md5('zqimg'), 0, 5) . date('YmdHis') . rand(0, 9999) . '.' . $last_str;
    return $newName;
}