h5使用aws s3上传图片到oss

tips

操作和流程同于之前的vue上传图片到oss，不在赘述，直接上代码。

代码实现：

html：

引入js：

 <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1046.0.min.js"></script>
 <script src="./js/aws_s3.js"></script>

<div class="imgUpload">
    <div class="tips">
      <span id="icon1" class="add">+</span>
      <img src="" alt="" id="showImg1" />
      <input accept="image/*" type="file" id="uploadImg1" onchange="$event.btnUploadFile(event,1)" style="display: none"/>
    </div>
    <div class="tips">
      <span id="icon2" class="add">+</span>
      <img src="" alt="" id="showImg2" />
      <input accept="image/*" type="file" id="uploadImg2" onchange="$event.btnUploadFile(event,2)" style="display: none"/>
    </div>
</div>
<button onclick="$event.doUpload()"></button>

js:

//读取图片文件  
btnUploadFile:function(e,index){
    // console.log(e.target.files[0])
    //获取图片文件
    var imgFile = e.target.files[0];
    // console.log(imgFile) 
    //后缀选取
    if (!/\/(?:jpeg|jpg|png)/i.test(imgFile.type)){
      console.log('图片格式不支持');
      methods.showMsg({msg: '图片格式不支持', uri: ''})

      return;
    }
    //异步读取文件
    var reader = new FileReader();
    reader.onload = function(evt) {
      //替换url
      // console.log(evt.target)
      if(evt.target.result.split(',')[1].length>1024*1024*10){
        methods.showMsg({msg: '图片大小不能超过10M', uri: ''})
        return
      }
      // $("#title").addClass('hide')
      $("#icon"+index).addClass('hide')
      data.base64 = evt.target.result.split(',')[1]
      $("#showImg"+index).addClass('img')
      $("#showImg"+index)[0].src = evt.target.result
    }
    reader.readAsDataURL(imgFile);

    //图片存入数组
    data.imageList.push(e.target.files[0])
    // console.log('输出图片文件数组',data.imageList)
  },

aws_s3.js:

var s3 = function s3(obj){
  var s3 = new AWS.S3({
    endpoint: obj.endpoint,
    accessKeyId: obj.accessKeyId,
    secretAccessKey: obj.secretAccessKey,
  })  //后端提供数据 
  return s3
}

说明：data.ossConfig是调用后端接口拿到的一些关于oss的配置项，格式如下：

{
    accessKeyId: "LTAxxxxxxxxxxxxxxxRSz",
    accessKeySecret: "xuxxxxxxxxxxxxxxxxxxx8eSnL",
    bucket: "fx-oss-test",   //桶名
    endpoint: "http://oss-cn-beijing.aliyuncs.com",   //上传终端
    filePath: "20211213",   //文件存放目录
    url: "https://fx-oss-test.oss-cn-zhangjiakou.aliyuncs.com/",   //作为图片地址拼接使用
}

//图片上传
  doUpload:function(callback){
    var isOk = false
    var index = 0
    var fileList = data.imageList
    new Promise(function(r){
      
      fileList.forEach(function(item,i){
        //文件路径
        var filePath = item.name
        //获取最后一个.的位置
        var names= filePath.lastIndexOf(".");
        //获取后缀
        var ext = filePath.substr(names+1);
        var fileName = data.ossConfig.filePath+'/' + item.lastModified+'.'+ext; //定义唯一的文件名
        var params = {
          Bucket: data.ossConfig.bucket, /* 储存桶名称 */
          ContentType: item.type,
          Body: item,
          ACL: "public-read",
          Key: fileName, /* 储存地址及文件名 */
        };

        s3(data.ossConfig).putObject(params, (err, values) =>{
          if (err) {
            console.log('失败',err) 
            alert({msg: alertTem.replace(/%msg/, '图片上传失败，请重试').replace(/%uri/, '')})
            return
          } else {
            // successful response
            console.log('上传成功',data.ossConfig.url+ fileName) 
            index = index+1
            data.imageUrlList.push(data.ossConfig.url+ fileName)
            // console.log('说到底',index,data.imageList.length)
            //等待两张图都上传完成
            if(index==data.imageList.length){
              isOk = true
              r(isOk)
            }
          }
        });
      })
    }).then(function(){
      console.log('图片上传完毕',data.imageUrlList,isOk)
      callback(isOk)
      return isOk
    })
  
   
  },