webapp / GreenwayWeb

  <template>

    <div class="upload-container">
      <div class="card-list-box">
  
        <div style="position: relative;width: 100%;">
          <input :accept="options.accept" style="opacity: 0;position: absolute;" :id="inputtype" ref="fileInput" type="file" :multiple="true"
          @change="handleUploadFile" />
          <div v-if="localValue && localValue.length < options.limit && !options.disabled" style="display: flex;align-items: center;width: 100%;">
            <el-button  @click="handleUpload" style="background-color: #fff;color: #000;border: 1px solid #dcdfe6;" class="buttonHover">
              <div style="display: flex;align-items: center;">
                <img src="@/assets/images/upload.png" style="width: 16px;height: 16px;margin-right: 4px;" alt="">
                <span style="">上传附件</span>
              </div>
            </el-button>
            <div class="tips" style="margin-left: 10px;">不超过{{ options.limitSize }}MB</div>
          </div>
        </div>

        <div v-if="islist" v-for="(file, i) in localValue" :key="'upload-BaseImage' + i" style="display: flex;justify-content: space-between;width: 100%;">

          <div>{{ file.address }}</div>

          <div title="删除" class="delete-box"
            @click="handleDeleteImg(file, i)">
            <i class="el-icon-close"></i>

          </div>

        </div>

      </div>

    </div>

  </template>

  <script>

    //   import { uploadFiles, uploadStraightFile } from '@/api/commonApi/file';

    import {

      miniioupload
    } from '@/api/commodityLease.js'

    import BaseImage from '@/components/BaseImage/index.vue';
  

    export default {

      components: {
        BaseImage,
      },
      name: 'BaseUpload',

      props: {

        islist: {
          type: Boolean,
          default: true,
        },

        value: {
          type: String,
          default: '',
        },
        cmpOption: {
          type: Object,
          default: () => ({
            disabled: false,
            isSetCover: true,
          }),

        },
        filePath: {
          type: String,

          default: 'other',

        },

        inputtype: {

          type: String,

          default: '',
        },
        limit: {
          type: Number,
          default: 1,

        },

        accept: {
          type: String,
          default: '.mp4',
        },

      },

      data() {
        return {

          fileList:[],
          onforIndex:0,
          localValue: [],
          options: {
            limitSize: 10,
            accept: '.mp4',
            multiple: false,
            limit: 1,
            disabled: false,
            field: 'files',
            reqParams: {
              code: 2000
            },
          },
          reactiveData: {
            files: [],
            filesIng: [],
            status: 'uploading',
            message: '上传中...',
            total: 0,
            loaded: 0,
            lengthComputable: false,
          },
        };

      },
      watch: {

        limit: {
          handler() {
            this.options.limit= this.limit
          },
          immediate: true,
        },

        accept: {
          handler() {
            this.options.accept= this.accept
          },
          immediate: true,
        },

        cmpOption: {
          handler() {
            this.setOptions();
          },
          immediate: true,
        },

        value: {
          handler(val) {

            if (val && val !='') {

              // 首先将值转为数组

              const list = Array.isArray(val) ? val : this.value.split(',')
              // 然后将数组转为对象数组

              this.fileList = list
              this.localValue = list.map(item => {

                if (typeof item === 'string') {

                  item = {
                    address: item,

                  }

                }

                return item
              })

            } else {

              this.localValue = []

              this.fileList = []
              return []
            }
          },

          immediate: true,
        },

      },
      methods: {

        async handleUploadFile(value) {
          const files = value.target.files
          if (!this.filesCheck(files)) {
            return;

          }

          this.reactiveData.filesIng = new Array(files.length);
          this.reactiveData.lengthComputable = false;
          this.reactiveData.status = 'uploading';
          this.reactiveData.total = 0;
          this.reactiveData.loaded = 0;
          let c1 =  await this.asyncFileUpload(Array.from(files));
          console.error('-----------')
          console.error(this.localValue)
          console.error(c1)
          let list = []
          for (let i = 0; i < c1.length; i++) {
            let info = {
              address:c1[i]
            }
            list.push(info)
          }
          console.error(list)
          this.localValue = [...this.localValue,...list]
          this.reactiveData.filesIng = []
          this.fileList = []
          for (let i = 0; i < this.localValue.length; i++) {
            this.fileList.push(this.localValue[i].address)
          }
          let urlstr = this.fileList.join(',')
          this.$emit('changimg',urlstr)
          

        },

        setOptions() {
          this.options = {
            ...this.options,
            ...this.cmpOption
          };
        },
        uploadPercentage() {
          return parseInt(String(this.reactiveData.loaded / (this.reactiveData.total / 100)));
        },
        handleUpload() {
          const input = document.querySelector('#'+this.inputtype)
          input.click()
        },
        async asyncFileUpload(formDataArray) {
          console.error(formDataArray)
          try {
            // 初始化上传状态
            this.reactiveData.status = 'uploading';
            this.reactiveData.filesIng = formDataArray.map(() => ({
              status: 'pending',
              loaded: 0,
              total: 0
            }));
            this.reactiveData.lengthComputable = false;
            this.reactiveData.total = 0;
            this.reactiveData.loaded = 0;
            let list = []
            // 循环遍历每个文件并进行上传
            for (let i = 0; i < formDataArray.length; i++) {
              const fileData = formDataArray[i];
  
              // 创建一个新的 FormData 对象
              let fd = new FormData();
              fd.append('file', fileData); // 假设 formData 包含文件
              fd.append('filePath', this.filePath);
  
              // 更新当前文件的上传状态
              this.reactiveData.filesIng[i].status = 'uploading';
  
              // 调用 miniioupload 方法并等待响应
              const res = await miniioupload(fd);
              list.push(res.data)
              // 处理成功响应
              this.reactiveData.filesIng[i].status = 'success';
         
            }
  
            // 所有文件上传完成
            this.reactiveData.status = 'success';
            this.$message.success('文件上传成功');
            console.error(list)
            return list
          } catch (error) {
            // 处理错误
            console.error('上传失败:', error);
            this.reactiveData.status = 'error';
            this.reactiveData.filesIng = formDataArray.map(() => ({
              status: 'error',
              loaded: 0,
              total: 0
            }));
            this.$message.error('上传失败');
            return []
          }
        },
        async handleDeleteImg(file, i) {
          let modelValue_ = this.localValue.filter((value, index) => index != i);
          this.localValue = modelValue_
          this.fileList = []
          for (let i = 0; i < this.localValue.length; i++) {
            this.fileList.push(this.localValue[i].address)
          }
          let urlstr = this.fileList.join(',')
          this.$emit('changimg',urlstr)
        },
        async handleSetCover(file, i) {
          console.error(file, i)
          this.onforIndex = i

        },
        filesCheck(files) {

          const {
            limitSize,
            accept,
            limit
          } = this.options;
          if (this.reactiveData.files.length + files.length > limit) {

            this.$message.error(`最多上传${limit}个文件`);
            return false;
          }
          for (let index = 0; index < files.length; index++) {
            const file = files[index];
            if (!this.checkFileType(file)) {
              this.$message.error(`请上传${accept}等格式`);
              return false;
            }
            if (!this.checkSize(file)) {
              this.$message.error(`文件大小不能超过 ${limitSize}MB!`);
              return false;
            }
          }
  
          return true;
        },

        checkSize({
          size
        }) {
          return size <= this.options.limitSize * 1024 * 1024;

        },

        checkFileType(file) {
          console.error(file)
          let {
            accept
          } = this.options;
          if (!accept || accept === '*') {
            return true;

          }

          accept = accept.toLowerCase().replace(/\s/g, '');
          const acceptTypeList = accept.split(',');
          const fileType = file.name.match(/\.\w*$/)?.shift() ?? '';
          return acceptTypeList.includes(fileType.toLowerCase());

        },

      },
    };

  </script>

  <style lang="scss" scoped>

    .upload-container {
      width: 100%;
  
      .tips {

        color: #0006;
        font: 14px 'Alibaba PuHuiTi 2.0-55 Regular';
        line-height: 38px;
      }

  
      .action-box {
        cursor: pointer;
        padding-left: 10px;
  
        .default-action {
          color: #3f9b6a;
        }
      }
  
      .card-list-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
  
        .card-item-box {
          position: relative;
          width: 112px;
          height: 112px;
          border: 1px dotted #dcdfe6;
          border-radius: 2px;
          overflow: hidden;
          margin: 0 10px 10px 0;
  
          .delete-box {
            padding: 2px 5px;
            position: absolute;
            right: 0;
            top: 0;
            line-height: normal;
            background-color: #000;
            color: #fff;
            border-radius: 50%;
            transform: translate(40%, -30%);
  
            .el-icon-close {
              font-size: 12px;
              transform: translate(-30%, 20%);
            }
          }
        }
  
        .card-action-box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 112px;
          height: 112px;
          border: 1px dashed #cdd0d6;
          border-radius: 2px;
          overflow: hidden;
          // margin-bottom: 10px;
          background-color: #fafafa;
          cursor: pointer;
          font-size: 12px;
          color: #00000066;
  
          .el-icon-plus {
            font-size: 20px;
          }
  
          &:hover {
            border-color: #3f9b6a;
            color: #3f9b6a;
          }
        }
      }
  
      .text-list-box {
        .text-item-box {
          padding: 0 5px;
          border-radius: 2px;
          overflow: hidden;
  
          .file-name {
            flex: 1;
          }
  
          .text-icon {
            flex-shrink: 0;
            padding-right: 10px;
          }
  
          .el-icon-close {
            cursor: pointer;
            padding-left: 10px;
            flex-shrink: 0;
          }
  
          &:hover {
            background-color: rgba(63, 155, 106, 0.2);
  
            .file-name {
              color: #3f9b6a;
            }
          }
  
          &:nth-child(n + 2) {
            margin-top: 10px;
          }
        }
      }
  
      .uploading-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        background-color: #c0c4cc;
      }
  
      .progress-box {
        width: 100%;
        height: 100%;
        position: relative;
  
        .el-progress {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  </style>