Fxiaoke Developer Manual

Here's the professional English translation of the remaining untranslated content from the Chinese development manual, maintaining consistency with the existing translated portions:

title: Upload
date: 2023-11-29 14:52:22
permalink: /pages/custom-component-web/component/ui/upload
categories:

pages
custom-component-web
component
ui
tags:

# FxUpload Upload

Upload files by clicking or dragging.

# Click to Upload

Click to upload

Only jpg/png files with size less than 10000kb

You can customize the upload button type and tooltip text through the slot. Use limit and on-exceed to limit the number of upload files and define behavior when exceeding the limit. Use before-remove to prevent file removal.

<fx-upload  
  class="upload-demo"  
  :accept="accept"  
  :max-size="maxSize"  
  :multiple="multiple"  
  :limit="limit"  
  :name="name"  
  :file-list="fileList"  
  :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 with size less than {{maxSize}}kb</div>  
</fx-upload>  

<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 image format and size.

Only image files less 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 less 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 must be JPG format!');  
        }  
        if (!isLt2M) {  
          this.$message.error('Avatar 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

# Picture Wall

Use list-type to set file list style.

<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 customize 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