count-pass-app/components/oss/oss.vue

<template>
  <view class="Oss" @click="fileUpload">
    <slot></slot>
  </view>
</template>
<script>
import {upload} from '../../api/upload'
export default {
  props:{
    // uploadSuccess: {
    //   type: Function,
    //   default: null
    // },
    filename:String,
    tenantId:{
      defalut:'',
      type:String,
    },
    mustTenantText:{
      defalut:'',
      type:String,
    },
  },
  data(){
    return {
      bucketName : '',
    }
  },
  methods:{
    fileUpload(){
      let _this = this
      if(this.mustTenantText && !this.tenantId){
        uni.showToast({
          title: _this.mustTenantText,
          icon: 'none',
          duration: 2000
        })
        return
      }
      let tenantId = this.tenantId || uni.getStorageSync('tenantId')
       uni.chooseImage({
        count:1,
        success:(res)=>{
          // debugger
          console.log(res);
          // #ifdef MP-WEIXIN
          let index =  res.tempFilePaths[0].lastIndexOf('.')
          res.name ='01'+res.tempFilePaths[0].substring(index)
          // #endif
          // #ifndef MP-WEIXIN
          res.name = res.tempFiles[0].name
          // #endif
          console.log('skdjagskjd:',res);
          upload(_this.filename,res.name,res.tempFiles[0].size,tenantId).then(result=>{
            if (result.data.code === 0) {
              _this.ossUpload(res, result.data.data);
            } else {
              uni.showToast({
                title: result.data.error || result.data.msg ,
                icon: 'none',
						    duration: 2000
              })
            } 
          })
        }
      })
    },
    ossUpload(file, ossToken) {
      let _this = this
      let tenantId = this.tenantId || uni.getStorageSync('tenantId')
      console.log(file,ossToken);
      // #ifndef MP-WEIXIN
      _this.bucketName = ossToken.bucket
      
      let formData = new FormData();
      formData.append('key', ossToken.dir +'/'+ file.name); //存储在oss的文件路径
      formData.append('OSSAccessKeyId', ossToken.accessid); //accessKeyId
      formData.append('policy', ossToken.policy); //policy
      formData.append('Signature', ossToken.signature); //签名
      formData.append('callback', ossToken.callback); //回调
      formData.append('success_action_status', 200); //成功后返回的操作码
      formData.append("file", file.tempFiles[0]);
      formData.append("x:tenant", tenantId);
      formData.append('x:bucket_name', ossToken.bucketName); //tenantId

      let xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.open("POST", ossToken.host);
      xhr.onload = () => {
        console.log(xhr.response); //输出结果
        _this.ossUploadFinished(JSON.parse(xhr.response))
      };
      xhr.send(formData);
      // #endif
      // #ifdef MP-WEIXIN
      wx.uploadFile({
        url:ossToken.host,
        header: {
          'Content-Type': 'multipart/form-data'
        },
        filePath:file.tempFilePaths[0],
        name:'file',
        formData:{
          key:ossToken.dir +'/'+ file.name,
          OSSAccessKeyId:ossToken.accessid,
          policy:ossToken.policy,
          Signature: ossToken.signature,
          callback: ossToken.callback,
          "x:tenant":tenantId,
          'x:bucket_name':ossToken.bucketName
          // success_action_status: '200',
        },
        success: function (res) {
          console.log('res========',res);
          if (res.statusCode === 200) {
            _this.ossUploadFinished(JSON.parse(res.data))
          } else {
            console.log('上传失败');
          }
        },
        fail: function (err) {
          console.info(err)
        }
      })
      // #endif
    },
    ossUploadFinished(res) {
      console.log(res);
      if (res.code === 0) {
        console.log(res);
          let data = {
            original: res.data.name,
            fileSize: res.data.size,
            url: res.data.url,
            fileName: res.data.filename,
            bucketName: this.bucketName,
            mimeType:res.data.mimeType
          }
          this.$emit('upload',data,this.filename)
      } else {
        uni.showToast({
          title: res.data.error || res.data.msg ,
          icon: 'none',
          duration: 2000
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.Oss{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f2f2f2;
}
</style>