ssti-CollegeManage/src/components/tool/beUpload.vue

<template>
  <button class="info_btn" @click="addImg($event)">
    {{ navName }}
    <input
      type="file"
      :accept="acc"
      style="display: none"
      capture="camera"
      @change="beforeUpload($event)"
    />
  </button>
</template>

<script>
import "../common/aws-sdk-2.235.1.min.js";
import { getNowDate } from "./Date";
export default {
  components: {},
  props: [ 'navName','accept','progress'],
  data() {
    return {
      inputShow: true,
      acc:"",
    };
  },
 watch: {
    accept: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.getAccept();
      },
    },
  },
  methods: {
    addImg(e) {
      var el = e.currentTarget || e;
      el.getElementsByTagName("input")[0].click();
      e.target.value = "";
    },
    beforeUpload(event) {
      // const loading = this.openLoading();
      var file = event.target.files[0];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域
      var bucket = new window.AWS.S3({
        params: {
          Bucket: "ccrb",
        },
      }); //选择桶
      var _this = this;
      _this.progress?_this.progress.show = true:'';
      _this.progress?_this.progress.value = 0:'';
      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //进度条
            _this.progress?_this.progress.value = Math.round((evt.loaded/evt.total)*100):'';
          })
          .send(function (err, data) {
            _this.inputShow = true;
            if (err) {
              _this.$message.error("上传失败");
            } else {
              let size = file.size;
              let unit = "B"
              if(size>1000000000){
                size = size/1024/1024/1024;
                unit = "G"
              }else if(size>1000000){
                size = size/1024/1024
                unit = "MB"
              }else if(size>1000){
                size = size/1024
                unit = "KB"
              }
              size = Math.floor(size);
              _this.$emit('getFile',{fileName:file.name,size:`${size}${unit}`,uploadTime:getNowDate(),url:data.Location})
            }
          });
      }
    },
    getAccept(){
        if(this.accept){
            this.acc = this.accept;
        }else{
            this.acc = "*";
        }
    },
  },
  created(){
    this.getAccept();
  },
};
</script>

<style scoped>
.info_btn{
  color: #fff;
  background-color: #0f7eff;
  padding: 8px 24px;
  font-size: 0.9375rem;
  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),
    0px 3px 1px -2px rgb(0 0 0 / 12%);
  min-width: 64px;
  font-weight: 500;
  border-radius: 4px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
}
.info_btn:hover {
  background-color: #4f7cd5 !important;
}
</style>