# 上传组件 Upload

<template>
  <h3-upload
  :action="action"
  v-model="data"
  :excludeThumbnail="['gif']"
  :mode="mode"
  :simpleSize="simpleSize"
  :disabled="disabled"
  multiple
/>
  <br/>
  <a-button @click="toggleMode">切换模式, 当前模式: {{mode}}</a-button>
  <a-input style="width: 120px;" v-show="mode === 'simple'" :value="simpleSize" @input="changeSimpleSize"></a-input>
  <br/>
  <br/>
  <a-button @click="shuffle">shuffle</a-button>
  <a-button @click="toggle">文件切换</a-button>
  <a-button @click="disabled = !disabled">是否只读(当前为{{disabled ? '是':'否'}})</a-button>
</template>
<script>
export default {
  name: "UploadDemo",
  data(){
    return {
      mode:"simple",
      simpleSize:36,
      disabled: false,
      action: {
        target: 'https://api.imgbb.com/1/upload',
        fileName: 'image',
        handleResult: (action, xhr) => {
          return '定制化上传失败描述'
        },
        data: {
          key: '4ea73a7601146bc20bd21f565a5d6c3f',
        },
      },
      data: [
        {
          name: '头像.png',
          uid: '1',
          category: 'image',
          url: 'https://picsum.photos/id/61/400/300',
          // previewUrl: 'https://picsum.photos/id/62/400/300',
          size: 1024 *512,
        },
        {
          name: '头像.png',
          uid: '222',
          category: 'image',
          url: 'https://picsum.photos/id/63/400/300',
          size: 1024 *512,
        },
        {
          name: '头像.png',
          uid: '13333',
          category: 'image',
          url: 'https://picsum.photos/id/67/400/300',
          size: 1024 *512,
        },
        {
          name: '头像.doc',
          uid: '2',
          category: 'word',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024* 512,
        },
        {
          name: '头像.zip',
          uid: '3',
          category: 'archive',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024* 512,
          downloadable: false,
          previewable: false
        },
        // {
        //   name: '头像.ppt',
        //   category: 'ppt',
        //   url: 'https://picsum.photos/id/61/400/300',
        //   size: 1024 *512,
        //   status: 'error'
        // },
        // {
        //   name: '头像.png',
        //   category: 'image',
        //   url: 'https://i.loli.net/2020/04/15/OoNUklVKqeicTfR.jpg',
        //   size: 1024* 1024,
        //   status: 'ready',
        //   progress: 0
        // },
      ],
      data1: [
        {
          name: '头像.png',
           uid: '1',
          category: 'image',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024 *512,
        },
        {
          name: '头像.zip',
           uid: '3',
          category: 'archive',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024* 512,
          downloadable: false,
          previewable: false
        },
        {
          name: '头像.doc',
           uid: '2',
          category: 'word',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024* 512,
        },

      ],
      data2: [
        {
          name: '头像.png',
           uid: '1',
          category: 'image',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024 *512,
        },
        {
          name: '头像.doc',
           uid: '2',
          category: 'word',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024* 512,
        },
      ]
    }
  },
  methods: {
    toggle () {
      this.data = this.data.length === 2 ? this.data1 : this.data2;
    }
    toggleMode () {
      this.mode = this.mode === 'detail' ? 'simple' : 'detail';
    }
    shuffle () {
      this.data = [this.data[1], this.data[0], this.data[2]];
    }
    changeSimpleSize (e) {
      let value = e.target.value;
      value = isNaN(value) ? 36 : Number(value);
      value = value <= 0 ? 0 : value;
      this.simpleSize = value;
    }
  }
}
</script>

<template>
  <h3-upload
    :action="action"
    multiple
    :maxSize="1024 * 1024"
    @oversize="onOversize"
    @preview="onPreview"
    @download="onDownload"
  />
</template>
<script>

export default {
  data(){
    return {
      action: {
        target: 'https://api.imgbb.com/1/upload',
        fileName: 'image',
        handleResult: (action, xhr) => {
          return '定制化上传失败描述'
        },
        data: {
          key: '4ea73a7601146bc20bd21f565a5d6c3f',
        },
      },
      data: [
        {
          name: '头像.png',
          category: 'image',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024 *512,
        },
        {
          name: '头像.doc',
          category: 'word',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024* 512,
        }
      ],
    }
  },
  methods:{
    onPreview(file, index, uploadFiles) {
      // const srcArr = uploadFiles.map(file => {
      //   return {
      //     name: file.name,
      //     source: file.url,
      //     downloadUrl: file.url
      //   };
      // });
      // this.$imagePreview({
      //   images: srcArr,
      //   initialViewIndex: index,
      // });
      console.log("onPreview" + file, index, uploadFiles);
    },

    onDownload(file, index, uploadFiles) {
      console.log("onDownload" + file, index, uploadFiles);
    },
    onOversize(outsizefiles, files, size) {
      this.$message.warning(`当前限制选择 ${size / 1024 / 1024} M，本次选择了 ${files.length} 个文件中有${outsizefiles.length}个文件超过大小限制`);
    },
  },
}
</script>

<template>
  <h3-upload
  :action="action"
  :format="['gif','jpeg']"
  @mismatch="mismatch"
  accept="image/*"
  multiple
  />
</template>
<script>
export default {
  data(){
    return {
      action: {
        target: 'https://api.imgbb.com/1/upload',
        fileName: 'image',
        handleResult: (action, xhr) => {
          return '定制化上传失败描述'
        },
        data: {
          key: '4ea73a7601146bc20bd21f565a5d6c3f',
        },
      },
      data: [
        {
          name: '头像.png',
          category: 'image',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024 *512,
        },
        {
          name: '头像.doc',
          category: 'word',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024* 512,
        },
      ],
    }
  },
  methods:{
    mismatch(mismatchFiles, currFiles, format){
      this.$message.warning(`只允许上传${format.join(', ')}后缀的文件`);
    },
  },
}
</script>

<template>
  <h3-upload
    :action="action"
    :limit="3"
    @exceed="handleExceed"
    accept="image/*"
    multiple
  />
</template>
<script>
export default {
  data(){
    return {
      action: {
        target: 'https://api.imgbb.com/1/upload',
        fileName: 'image',
        handleResult: (action, xhr) => {
          return '定制化上传失败描述'
        },
        data: {
          key: '4ea73a7601146bc20bd21f565a5d6c3f',
        },
      },
      data: [
        {
          name: '头像.png',
          category: 'image',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024 *512,
        },
        {
          name: '头像.doc',
          category: 'word',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024* 512,
        },
      ],
    }
  },
  methods:{
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
  },
}
</script>

<template>
  <h3-upload
    :action="action"
    @removed="onRemove"
    v-model="data"
    :beforeRemove="beforeRemove"
    multiple
  />
</template>
<script>
export default {
  data(){
    return {
      action: {
        target: 'https://api.imgbb.com/1/upload',
        fileName: 'image',
        handleResult: (action, xhr) => {
          return '定制化上传失败描述'
        },
        data: {
          key: '4ea73a7601146bc20bd21f565a5d6c3f',
        },
      },
      data: [
        {
          name: '头像.png',
          category: 'image',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024 *512,
        },
        {
          name: '头像.doc',
          category: 'word',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024* 512,
        },
      ],
    }
  },
  methods:{
    onRemove (file, index, files) {
      console.log(file);
    },
    beforeRemove(file, fileList) {
      console.log('file, fileList: ', file, fileList);
      return new Promise((resolve)=>{
        this.$modal.confirm({
            title: '确定要删除该项么？',
            content: '请谨慎操作',
            doubleCheck: true,
            checkContent: '确认执行此操作',
            onOk() {
              resolve(true)
            },
            onCancel(){
              resolve(false)
            }
       });
      });
    },
  },
}
</script>

<template>
  <a-button @click="disabled = !disabled">是否只读(当前为{{disabled ? '是':'否'}})</a-button>
  <br />
  <br />
  <h3-upload
    :action="action"
    v-model="data"
    :disabled="disabled"
    multiple
  />
</template>
<script>
export default {
  name: "UploadDemo",
  components: {

  },
  data(){
    return {
      action: {
        target: 'https://api.imgbb.com/1/upload',
        fileName: 'image',
        handleResult: (action, xhr) => {
          return '定制化上传失败描述'
        },
        data: {
          key: '4ea73a7601146bc20bd21f565a5d6c3f',
        },
      },
      data: [
        {
          name: '头像.png',
          category: 'image',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024 *512,
        },
        {
          name: '头像.doc',
          category: 'word',
          url: 'https://picsum.photos/id/61/400/300',
          size: 1024* 512,
        },
      ],
      disabled: true,
    }
  },
}
</script>