file upload

支持上传文件组件

• 成为 Patreon 的赞助商。
• 通过加密货币进行一次性捐赠。

介绍

您是否正在寻找一种上传文件的简单方法，这就是您所寻找的。

这是一个使用ajax上传文件的vue组件。它包含令人惊叹的功能，您可以轻松使用它，没有任何复杂性。

特征

• 上传前预览文件
• 多文件上传
• 拖放文件
• 同时上传多个文件
• 删除/全部删除
• 取消/全部取消
• 分块上传

官方文档

文件上传的文档可以在这里找到

演示

文件上传演示

要求

• 顺风 => 3.*
• Axios => 2.2.17*

安装

要安装和设置该组件，我们将执行以下几个步骤：

步骤1

npm install ` @yazan.alnughnugh/file-upload 

步骤2

视图2

 // app/resources/js/app.js

 Vue . component ( 'file-upload' , require ( '@yazan.alnughnugh/file-upload' ) . default ) ;

视图3

 // app/resources/js/app.js
 import FileUpload from '@yazan.alnughnugh/file-upload' ;

 const app = createApp ( options ) ;

 app . component ( 'file-upload' , FileUpload ) ;
 app . mount ( '#app' ) ; 

用法

要开始使用该组件，我们将使用三个道具将组件添加到您的 Blade 文件中，

url是您要向其发送请求的 url，

id如果您想随请求发送模型 ID，

label在这里您可以添加您的描述。

// resources/posts/create.blade.php

  < file-upload :url =" url " :id =" id " :label =" label " > </ file-upload > 

要求

请求将与以下相同，文件将被一个一个地发送，每个文件一个请求。

 // resources/posts/create.blade.php

  [
    " id " => " 9 " , // if you added id
    " file " => File , // this is our file
  ] ;   

配置

姓名	类型	默认	描述
url	细绳	“/”	是您要向其发送请求的 url
id	数字	无效的	如果您想随请求发送模型 ID
label	细绳	“PNG、JPG、GIF 最大 10MB”	您可以在这里添加您的描述