H5上传图片到OSS服务器

废话不多说直接上代码，vue、react都差不多，我直接贴vue写的了。
先贴的是上传组件upload.vue。

 <template>
  <div>
    <label class="oss_file">上传
      <input type="file" :id="id" :aid="aid" :change_dir="change_dir" :multiple="multiple" @change="doUpload()"/>
    </label>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default{
    name:'upload',
    props:{
      multiple:{//是否多选
        type: Boolean,
        twoWay:false
      },
      id:{//input的这个id
        type: String,
        twoWay:false
      },
      change_dir:{//是否改变路径，往下面看
        type: Boolean,
        twoWay:false
      },
      aid:{//是否改变路径，往下面看
        type: String,
        twoWay:false
      }
    },
    data(){
      return{
        region:'oss-cn-shanghai',
        bucket:'Bucket Name',
        imgSrc:'',
        host1:'',
        dir:'',
        urls:[],
      };
    },
    methods:{
      doUpload(){
        let _this = this;
        let url;
        if(this.change_dir){
          url = 'http://XXXXXXX.com/oa/common/oss_img_config?aid='+this.aid
        }else{
          url = 'http://XXXXXXX.com/oa/common/oss_img_config'
        }
        _this.http.get(url).then(function(result){
        const fileLen = document.getElementById(_this.id).files;
        for(var i = 0;i < fileLen.length; i++ ){
          (function (a) {
          let ossData = new FormData();
          let file = fileLen[i];
          let storeAs = file.name;
          storeAs = storeAs.substr(storeAs.lastIndexOf('.'));
          storeAs = _this.random_string() + storeAs;
          ossData.append('OSSAccessKeyId', result.data.accessid);
          ossData.append('policy', result.data.policy);
          ossData.append('Signature', result.data.signature);
          ossData.append('success_action_status', '200');///这个是重点
          ossData.append('key', (result.data.dir)+storeAs);
          ossData.append('name', storeAs);
          ossData.append('file', file);
          var oReq;
          if (window.XMLHttpRequest) {
            oReq = new XMLHttpRequest();
          } else { //IE6及其以下版本浏览器
            oReq = new ActiveXObject('Microsoft.XMLHTTP');
          }
          oReq.onreadystatechange = function () {
            if (oReq.readyState == 4) {
              var status = oReq.status;
              if (status == 200) {
                _this.host1 = result.data.host+'/';
                _this.dir = result.data.dir;
                let s = _this.host1+_this.dir+(storeAs);
                _this.urls.push(s);
                _this.$emit('transfer',s)
              } else {
                alert('upload fail')
              }
            }
          }
          oReq.open("POST",result.data.host);
          oReq.send(ossData);
          })(i)
        }
      });
      },
    random_string:function (len) {
    len = len || 32;
    var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    var maxPos = chars.length;
    var pwd = '';
    for (var i = 0; i < len; i++) {
      pwd += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
  }
    },
    watch:{
      'urls':function () {
//        alert('上传成功')
      }
    }
  };
</script>
<style type="text/css">
  .oss_file {
    background: #ff6600;
    width: 80px;
    height: 40px;
  }
  .oss_file  input {
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
</style>
接下来是页面的引用。
  <ali-upload  :multiple="true" :change_dir="true"  :aid="aid" :id="uploadId5" @transfer="getArr4"></ali-upload>

  import aliUpload from './../common/upload.vue';
  components:{
           aliUpload
          }
  getArr4:function (arr) {
    this.image_list4.push(arr);
  },  

第一次请求是告诉oss，本尊要上传图片了，快把过关文牒给我，请求过关文牒上是这样写的：

accessid:"OloVUQHizGZCf1iI"
dir:"up-img/pic-60044/",//这个是上面那个change_dir兄弟导致的，就是你是否想改变存图片的默认路径
expire:1521448215
host:"http://oa-img.oss-cn-qingdao.aliyuncs.com"
policy:"eyJleHBpcmF0aW9uIjoiMjAxOC0wMy0xOVQxNjozMDoxNVoiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVwLWltZ1wvcGljLTYwMDQ0XC8iXV19"
signature:"FQbW09WE/noQzbOloPKvTfTH6jk="

第二次的请求就是通过formdata的方式把图片传上去。不多讲。
我上面最终结果拼出来的图片地址是：http://oa-img.oss-cn-qingdao.aliyuncs.com/up-img/pic-60044/6jdrPEaeME56hy3djMTN6Qks7MwdTGQK.png，可以访问的。可以试试。
其实代码都很简单，相信各位铁子一看都懂，俺铁牛也不多解释了。