Upload

# FxUpload Upload

Upload files by clicking or dragging

# Click to Upload

Click to upload

Only jpg/png files can be uploaded, and no more than 10000kb

You can pass custom upload button type and text prompt through slot. You can limit the number of uploaded files and define the behavior when the limit is exceeded by setting limit and on-exceed. You can prevent file removal operations by setting before-remove.

<fx-upload
  class="upload-demo"
  :accept="accept"
  :max-size="maxSize"
  :multiple="multiple"
  :limit="limit"
  :name="name"
  :file-list="fileList"
  :show-file-list="false"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  :on-error="handleError"
  :on-progress="handleProgress"
  :on-change="handleChange"
  :before-remove="beforeRemove"
  :on-exceed="handleExceed"
>
  <fx-button size="small" type="primary">Click to upload</fx-button>
  <div slot="tip" class="el-upload__tip" v-if="maxSize">Only jpg/png files can be uploaded, and no more than {{maxSize}}kb</div>
  <!-- <div slot="file" slot-scope="{file}">
    <i class="el-icon-edit"></i>
  </div> -->
</fx-upload>

<!-- <fx-button @click="click">button</fx-button> -->

<script>
  export default {
    data() {
      return {
        fileList:[],
        fileList0: [{ name: 'food.jpeg',size:1000, url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },{ name: 'food.jpeg',status:'uploading',percentage:'50', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
        multiple: true,
        limit: 2,
        name:'test',
        maxSize:10000,
        accept:'.png,.jpg'
      };
    },
    methods: {
      handleSuccess(response, file, fileList) {
        console.log('handleSuccess', response, file, fileList);
      },
      handleError(err, file, fileList) {
        console.log('handleError', err, file, fileList);
      },
      handleProgress(event, file, fileList) {
        console.log('handleProgress', event, file, fileList);
      },
      handleChange(file, fileList) {
        console.log('handleChange', file, fileList,this.fileList);
      },
      handlePreview(file) {
        console.log('handlePreview', file);
      },
      handleRemove(file, fileList) {
        console.log('handleRemove', file, fileList);
      },
      beforeRemove(file, fileList) {
        console.log('beforeRemove', file, fileList);
        console.log(this.fileList);
      },
      handleExceed(file, fileList, msg) {
        console.log('handleExceed', file, fileList, msg);
      },
      beforeUpload(){
        return false;
      },
      file() {
        console.log(arguments);
      },
      remove() {
        console.log(arguments);
      },
    },
  };
</script>

Copy

# Avatar Upload

Use before-upload to limit the image format and size uploaded by users.

Only image files can be uploaded, and no more than 20kb

<fx-upload
  class="avatar-uploader"
  :max-size="maxSize"
  :show-file-list="showFileList"
  :on-success="handleAvatarSuccess"
  :on-error="handleAvatarError"
  :before-upload="beforeAvatarUpload"
>
  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  <div slot="tip" class="el-upload__tip" v-if="maxSize">Only image files can be uploaded, and no more than {{maxSize}}kb</div>
</fx-upload>

<script>
  export default {
    data() {
      return {
        imageUrl: '',
        showFileList:false,
        maxSize:20
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        console.log('handleAvatarSuccess...',res,file)
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      handleAvatarError(err,file){
        console.log('handleAvatarError...',err,file)
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(files) {
        const file=files[0];
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('Avatar image can only be in JPG format!');
        }
        if (!isLt2M) {
          this.$message.error('Avatar image size cannot exceed 2MB!');
        }
        return isJPG && isLt2M;
      },
    },
  };
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
  }
  .avatar {
    width: 70px;
    height: 70px;
    display: block;
  }
</style>

Copy

# Photo Wall

Use the list-type attribute to set the style of the file list.

<fx-upload
  url="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</fx-upload>
<fx-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</fx-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

Copy

# File Thumbnail

Use scoped-slot to set the thumbnail template.

<fx-upload
  url="#"
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</fx-upload>
<fx-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</fx-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false
      };
    },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
    }
  }
</script>

Copy