element 上传文件到阿里云oss

<template>
  <div>
    <el-upload class="upload-demo"
               action=""
               ref='upload'
                :http-request="fnUploadRequest"
               :on-remove="handleRemove"
                :before-upload="beforeAvatarUpload"
               accept=".apk,.ipa"
               :disabled="!FileHear"
               :file-list="fileList"
               :auto-upload='true'>
      <el-button size="mini"
                 :disabled="!FileHear"
                 type="primary">选择上传</el-button>
      <div slot="tip"
           class="el-upload__tip">
        仅支持上传apk 或者 ipa文件格式</div>
    </el-upload>
  </div>
</template>
<script>
import { store } from "@/lib/upload";
import { getDateLocation } from "@/utils/datetime";

export default {
  name: 'FireUpload',
  props: {
    fileUrl: {
      default: '',
      type: String
    }
  },
  data () {
    return {
      FileHear: true,
    }
  },
  methods: {
        /**
     * @description [fnUploadRequest 覆盖默认的上传行为，实现自定义上传]
     * @author   shanshuizinong
     * @param    {object}   option [上传选项]
     * @return   {null}   [没有返回]
     */
    async fnUploadRequest(option) {
        console.log("参数", option);
        this.loading = true;
        this.FileHear=false;
        let file = option.file;
                try {
                  let random_name = "develop/" + getDateLocation() + "/" + file.name;
                  let relativePath = "serviceItem/";
                  console.log("文件", file);
                  // 分片上传文件
                  let ret = await store().multipartUpload(random_name, file, {
                    progress: async function(p) {
                      let e = {};
                      e.percent = p * 100;
                      option.onProgress(e);
                    }
                  });
                  
                  if (ret.res.statusCode === 200) {
                    console.log("上传成功", ret);
                      this.$message({ message: '上传成功', type: 'success' })
                      let url=ret.res.requestUrls[0]
                      url=url.substring(0,url.indexOf('?')); //过滤掉url中的参数部分
                      console.log(url);
                      this.$emit('changed', url)
                  } else {
                    option.onError("上传失败");
                  }
                } catch (error) {
                  console.error(error);
                  option.onError("上传失败");
                }

      this.loading = false;
    },  

     //文件上传前的校验
    beforeAvatarUpload(file) {
        let index = file.name.lastIndexOf(".");
        let suffix = file.name.substr(index + 1);
        console.log(suffix)
          if (suffix == 'apk' || suffix == 'ipa') {
            
          }else{
             this.$message({ message: '仅支持上传apk 或者 ipa文件格式，请重新选择文件', type: 'error' })
             return false;
          }

    },
    handleRemove (file, fileList) {
      this.FileHear = true
      this.$emit('changed', '')
    },
    handdelete (file) {
      let random_name = file.url ? file.url : file;
      // random_name = decodeURI(random_name.replace(random_name, ""));
      let _this = this;
      async function deletes () {
        try {
          let result = await store().delete(random_name);
        } catch (e) {
          console.log(e);
        }
      }
      deletes();
    },
    handlePreview (file, fileList) {
      var index = file.name.lastIndexOf(".");
      var suffix = file.name.substr(index + 1);
      if (suffix == 'apk' || suffix == 'ipa') {
        let random_name = "develop/" + getDateLocation() + "/" + file.name;
        var that = this;
        return new Promise((resolve, reject) => {
          async function put () {
            try {
              console.log(file)
              let result = await store().put(random_name, file)
              that.$emit('changed', result.url)
              that.$message({ message: '上传成功', type: 'success' })
            } catch (e) {
              console.log(e);
            }
          }
          put();
          resolve(true);
        });
      } else {
        this.$message({ message: '仅支持上传apk 或者 ipa文件格式，请重新选择文件', type: 'error' })
      }
    },
    onexceed (file, fileList) {
      console.log(file, 1111, fileList)
    },
    fileUrlchange (val) {
      console.log(val)
      if (val) {
        this.fileList = []
        this.fileList.push({ name: val.slice(val.lastIndexOf('/') + 1), url: val })
        this.FileHear = false
      } else if (!val) {
        this.FileHear = true
        this.fileList = []
      }
    },

  },
  computed: {
    fileList () {
      console.log(this.fileUrl)
      if (this.fileUrl) {
        this.$refs.upload.clearFiles() //清除文件对象
        let fileList = [];
        fileList = [{ name: this.fileUrl.slice(this.fileUrl.lastIndexOf('/') + 1), url: this.fileUrl }];
        return fileList;
      } else {
        return []
      }

    },

  },
  watch: {
    'fileList.length' (val, oldval) {
      if (val > 0) {
        this.FileHear = false
      } else {
        this.FileHear = true
      }
    },
    deep: true
  }

}
</script>
<style scoped>
.notclick {
  pointer-events: none;
}
</style>

　　

import { store } from "@/lib/upload";

import { getDateLocation } from "@/utils/datetime";

 

const oss = require('ali-oss');

export function store(client){

return client = oss({

region: 'oss-cn-shenzhen',

accessKeyId: 'xxxx',

accessKeySecret: 'xxxxx',

bucket: 'xxxx'

});

}

 

/**

*

* 获取系统时间格式

*/

export function getDateLocation (s) {

let nowDate = new Date();

let year = nowDate.getFullYear();

let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)

: nowDate.getMonth() + 1;

let day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate

.getDate();

s = year + "-" + month + "-" + day; // "2018-03-26"

return s;

}