FxUpload

About 2145 wordsAbout 7 min

2025-12-16

Upload files by clicking or dragging.

Click to upload

<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 under {{maxSize}} KB can be uploaded</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>

User Avatar Upload

Use before-upload to restrict the format and size of uploaded images.

Photo Wall

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

File Thumbnail

Use scoped-slot to set the thumbnail template.

Image List Thumbnail

Upload File List Control

Use the on-change hook function to control the list.

Drag-and-Drop Upload

Manual Upload

Chunked Upload

Attributes

Parameter	Description	Type	Optional Values	Default
url	File upload address (non-chunked)	string	-	"/FSC/EM/File/UploadByForm"
headers	Sets the upload request headers	object	-	-
multiple	Whether multiple files can be selected	boolean	-	-
data	Extra parameters included during upload	object	-	-
name	Uploaded file field name	string	-	file
with-credentials	Supports sending cookie credential information	boolean	-	false
show-file-list	Whether to show the uploaded file list	boolean	-	true
drag	Whether to enable drag-and-drop upload	boolean	-	false
accept	Accepted uploaded file types(thumbnail-mode mode this parameter is invalid), multiple types are separated by commas	string	.txt,.pdf,.jpg	-
on-preview	Hook when an uploaded file in the file list is clicked	function(file)	-	-
on-remove	Hook when a file is removed from the file list	function(file, fileList)	-	-
on-success	Hook when file upload succeeds	function(response, file, fileList)	-	-
on-error	Hook when file upload fails	function(err, file, fileList)	-	-
on-progress	Hook during file upload	function(event, file, fileList)	-	-
on-change	Hook when file status changes. Called when files are added, uploaded successfully, or fail to upload	function(file, fileList)	-	-
on-exceed	Hook when files exceed limits,	function(files, fileList,o) files: newly selected files o.type: 1: file count exceeds the limit (`limit` must be set), 2: file size exceeds the limit (`maxSize` must be set) 3: file type does not match (`accept` must be set)	-	-
before-upload	Hook before uploading a file. The parameter is the file to upload. If false is returned, upload stops.	function(files)	-	-
before-remove	Hook before deleting a file. Parameters are the uploaded file and file list. If false is returned, or a returned Promise is rejected, upload stops.	function(file, fileList)	-	-
list-type	Type of the file list	string	text/picture/picture-card	text
auto-upload	Whether to upload immediately after selecting files	boolean	-	true
file-list	Uploaded file list, for example: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	-	[]
http-request	Overrides the default upload behavior so the upload implementation can be customized	function(options)	-	-
disabled	Whether disabled	boolean	-	false
limit	Maximum number of uploaded files allowed	number	-	-
max-size	Maximum upload size (KB), default 10 MB	number	-	10485760
basePath	Upload API root address	string	-	-
whenChunks	Use chunked upload when the file size exceeds this value. Default 0: no chunking, unit B	number	-	0
chunk	Chunk information; see the chunk table below	object	-	-

chunk

Parameter	Description	Type	Optional Values	Default
mime	Value of the request Content-Type	string	-	-
size	Chunk size, unit B	number	-	2097152
tryTime	Number of retry attempts after failure	number	-	3
starturl	Upload preprocessing API	string	-	"/FSC/EM/File/ChunkFileUploadStart"
uploadurl	Upload chunk API	string	-	"/FSC/EM/File/ChunkFileUploadDataByStream"
doneurl	Upload completion API	string	-	"/FSC/EM/File/ChunkFileUploadComplete"

Slot

Method	Description
trigger	Content that triggers the file selection dialog
tip	Tip description text

Methods

Method	Description	Parameter
clearFiles	Clears the uploaded file list (this method is not supported in before-upload)	-
getFiles	Gets the uploaded file list	-
abort	Cancels upload requests	(file: the file object in fileList)
uploadFile	Manually uploads file(s); can be used for re-upload	file