marchFantasy / Vue File Upload
vue.js ,vue-loader 上传文件,vue-file-upload,vue上传文件组件
Stars: ✭ 317
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue File Upload
React Dropzone Uploader
React file dropzone and uploader
Stars: ✭ 276 (-12.93%)
Mutual labels: file-upload, uploader
Filestack Js
Official Javascript SDK for the Filestack API and content ingestion system.
Stars: ✭ 169 (-46.69%)
Mutual labels: file-upload, uploader
Uploadcare Php
PHP API client that handles uploads and further operations with files by wrapping Uploadcare Upload and REST APIs.
Stars: ✭ 77 (-75.71%)
Mutual labels: file-upload, uploader
Dropit
DropIt is a File Uploader built with nodejs, Upload, get a link, and share your files with anyone easily.
Stars: ✭ 367 (+15.77%)
Mutual labels: file-upload, uploader
react-native-tus-client
React Native client for the tus resumable upload protocol.
Stars: ✭ 38 (-88.01%)
Mutual labels: file-upload, uploader
Tus Php
🚀 A pure PHP server and client for the tus resumable upload protocol v1.0.0
Stars: ✭ 1,048 (+230.6%)
Mutual labels: file-upload, uploader
Uppload
📁 JavaScript image uploader and editor, no backend required
Stars: ✭ 1,673 (+427.76%)
Mutual labels: file-upload, uploader
Chibisafe
Blazing fast file uploader and awesome bunker written in node! 🚀
Stars: ✭ 657 (+107.26%)
Mutual labels: file-upload, uploader
V Uploader
A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop
Stars: ✭ 216 (-31.86%)
Mutual labels: file-upload, uploader
Uploadcare Widget
Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag&drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.
Stars: ✭ 183 (-42.27%)
Mutual labels: file-upload, uploader
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✭ 92 (-70.98%)
Mutual labels: file-upload, uploader
lolisafe
Blazing fast file uploader and awesome bunker written in node! 🚀
Stars: ✭ 181 (-42.9%)
Mutual labels: file-upload, uploader
Sharex Upload Server
AKA ShareS - Feature full & Stable ShareX and file server in node. Includes images, videos, code, text, markdown rendering, password protected uploads, logging via discord, administration through Discord, url shortening, and a full front end. Use standalone or via reverse proxy
Stars: ✭ 180 (-43.22%)
Mutual labels: file-upload, uploader
uploadcare client
A flutter library for working with Uploadcare REST API. File uploads, media processing, and adaptive delivery for web and mobile.
Stars: ✭ 14 (-95.58%)
Mutual labels: file-upload, uploader
ShareX-CDN
Basic image, text & file uploader CDN for ShareX
Stars: ✭ 22 (-93.06%)
Mutual labels: uploader
Formvuelar
Vue form components with server-side validation in mind
Stars: ✭ 263 (-17.03%)
Mutual labels: uploader
uploading-files-react-node
Uploading files with React.js and Node.js
Stars: ✭ 33 (-89.59%)
Mutual labels: file-upload
AspNetCoreUploadingProgress
File uploading with progress bar in ASP.NET Core
Stars: ✭ 31 (-90.22%)
Mutual labels: file-upload
vue-file-upload
vue1.x版本 可安装[email protected]版本
vue2.x版本 可安装当前最新版本
vue.js ,vue-loader 上传文件,vue-file-upload 代码里面包含demo,运行:
yarn install && yarn start
install
npm
npm install --save vue-file-upload
CommonJS
var VueFileUpload = require('vue-file-upload');
//es6
import VueFileUpload from 'vue-file-upload';
属性(Props)
//目标服务器地址
url:{
type:String,
required:true
},
//最大文件上传数
max:{
type:Number,
default:Number.MAX_VALUE
},
//文件名称(服务端识别的上传文件名)
name:{
type:String,
default:'file'
},
//自动上传
autoUpload:{
type:Boolean,
default:false
},
//支持多选文件上传
multiple:{
type:Boolean,
default:false
},
//每新增一个待上传文件回调函数
onAdd:{
type:Function,
default:noop
},
//过滤函数
filters:{
type:Array,
default:()=>{
return new Array();
}
},
//请求附带参数
requestOptions:{
type:Object,
default:()=>{
return{
formData:{},
headers:{},
responseType:'json',
withCredentials:false
}
}
},
//文件上传状态回调函数
events:{
type:Object,
default:()=>{
return {
onProgressUpload:noop(file,progress:number),//上传进度回调
onCompleteUpload:noop(file,response,status,headers),//上传完成回调,不论成功或失败都调用
onErrorUpload:noop(file,response,status,headers),//上传失败回调
onSuccessUpload:noop(file,response,status,headers),//上传成功回调
onAbortUpload:noop(file,response,status,headers),//取消上传
onAddFileFail:noop(file,failFilter:array),//添加待上传文件失败回调,会通过filters过滤函数校验,不通过回调此函数
onAddFileSuccess:noop(file)//添加待上传文件成功回调
}
}
}
按钮名称说明
<vue-file-upload>
<span slot="label">上传文件</span>
</vue-file-upload>
文件属性说明(file)
const file = {
name:"文件名称",//文件名称
size:123,//文件大小
type:"image/jpeg",//文件类型
isReady: false,//,点击上传后,即将准备好上传
isUploading:false,//正在上传
isUploaded:false,//上传后
isSuccess:false,//成功上传
isCancel:false,//取消上传
isError:false,//上传失败
progress:0,//上传进度
}
//file 函数(method)
file.upload(); //上传该文件
file.cancel();//取消上传
file.remove();//移除该文件
方法(methods)
this.$refs.vueFileUploader.uploadAll()//上传所有队列中的文件
this.$refs.vueFileUploader.clearAll()//清空队列文件
this.$refs.vuefileUploader.setFormDataItem( key, value );//设置formdata
ES6
app.vue
<template lang="jade">
vue-file-upload(url='upload.do',
ref="vueFileUploader",
v-bind:filters = "filters",
v-bind:events = 'cbEvents',
v-bind:request-options = "reqopts",
v-on:onAdd = "onAddItem")
span(slot="label") 选择文件
table
thead
tr
th name
th size
th progress
th status
th action
tbody
tr(v-for='file in files')
td(v-text='file.name')
td(v-text='file.size')
td(v-text='file.progress')
td(v-text='onStatus(file)')
td
button(type='button',@click="uploadItem(file)") 上传
button(type='button',@click="uploadAll") 上传所有文件
button(type='button',@click="clearAll") 清空文件列表
</template>
<script>
import VueFileUpload from 'vue-file-upload';
export default{
data(){
return{
files:[],
//文件过滤器,只能上传图片
filters:[
{
name:"imageFilter",
fn(file){
var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
}
],
//回调函数绑定
cbEvents:{
onCompleteUpload:(file,response,status,header)=>{
console.log(file);
console.log("finish upload;")
}
},
//xhr请求附带参数
reqopts:{
formData:{
tokens:'tttttttttttttt'
},
responseType:'json',
withCredentials:false
}
}
},
mounted(){
//设置formData数据
this.$refs.vueFileUploader.setFormDataItem('authorization',"123");
},
methods:{
onStatus(file){
if(file.isSuccess){
return "上传成功";
}else if(file.isError){
return "上传失败";
}else if(file.isUploading){
return "正在上传";
}else{
return "待上传";
}
},
onAddItem(files){
console.log(files);
this.files = files;
},
uploadItem(file){
//单个文件上传
file.upload();
},
uploadAll(){
//上传所有文件
this.$refs.vueFileUploader.uploadAll();
},
clearAll(){
//清空所有文件
this.$refs.vueFileUploader.clearAll();
}
},
components:{
VueFileUpload
}
}
</script>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].