lian-yue/vue-upload-component

Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter

vue-upload-component

Vue.js file upload component The component is just a button

• Multi-file upload
• Upload directory
• Drag upload
• Drag the directory
• Upload multiple files at the same time
• html4 (IE 9)
• PUT method
• Customize the filter
• thumbnails
• Chunk upload

Example

https://lian-yue.github.io/vue-upload-component/

Installation

npm install vue-upload-component --save

Vue3

npm install vue-upload-component@next --save

Documentation

https://lian-yue.github.io/vue-upload-component/#/documents

Vue.js 文件上传组件 组件只是一个按钮

• 上传多文件
• 上传目录
• 拖拽
• 拖拽目录
• 多线程
• html4(IE 9)
• PUT 方法
• 自定义过滤器
• 缩略图

演示

https://lian-yue.github.io/vue-upload-component/#/zh-cn/

安装

npm install vue-upload-component --save

Vue3

npm install vue-upload-component@next --save

文档

https://lian-yue.github.io/vue-upload-component/#/zh-cn/documents

Special thanks (特别感谢)

• @josec89

vue-upload-component's Issues

run dev Syntax Error: Unexpected token (144:6)

Syntax Error: Unexpected token (144:6)

  142 |   render (h) {
  143 |     return (
> 144 |       <label class={{
      |       ^
  145 |         'file-uploads': true,
  146 |         'file-uploads-html5': this.mode == 'html5',
  147 |         'file-uploads-html4': this.mode == 'html4'

Please help me to check!
Error @lian-yue @ilvsx @lukeb

extensions为数组时报错

设置extensions为数组是会有Right-hand side of 'instanceof' is not callable的错误
错误代码在src/example.js的331行，instanceof前后参数位置写反了

是否可以支持预览和裁剪？？

是否可以支持预览和裁剪？？希望更新能获得对应功能

Uncaught TypeError: Cannot set property 'request' of undefined

I've copied the example.js but get this error. Any ideas on what's causing it?

this line here:

点击上传按钮后要等待很久才出来选择文件的界面

不知道是什么问题导致的，readme中的example页面也是 得等个好几秒才出来选择页面

可否让这个组件支持jwt？

上传时 往往需要认证 不能谁都上传
感谢

Vue 2 / webpack / ES6 = Uncaught TypeError: Component is not a constructor(…)

accept是否支持同时上传两种格式的文件？

Uncaught TypeError: Cannot read property '0' of undefined

When im using FileUpload.files[0].response i'm getting an error. at VueComponent.getAll (eval at <anonymous> (app.js:757), <anonymous>:164:93)

Warning - mutated: "files"

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "files" 
(found in component <file-upload>)

Possible to fix it, it happens when I live page where is upload located?

And could you remove source maps from script?

Thanks!

Drag and drop how to achieve folder？

Drag and drop how to achieve folder？ thanks

'drop' prop doesn't accept selector string

The 'drop' prop is restricted to a Boolean type and so no longer accepts a string to be used as a selector to attach the drag and drop events to.

I'll open a PR shortly to resolve this.

关于props

大佬，可否详细解释下你的组件各个配置，以及组件支持什么功能，例如分片上传啥的，readme写详细点目测会火

Simaltaneous File Uploads when set to multiple

So far this has been working great with vuex-2 and its configurations and examples has helped me so much. Thank you. Is there a way to enable simultaneous file uploads instead of one after the other?

老司机，现在这个插件不支持vue2？

我在vue2 服务端渲染时，编译的时候报 window is not defined，
希望老司机能兼容到vue2

Can't import the vue-upload-component module

I'm using the following version of your component and the vuejs:

• [email protected](install by npm install vue-upload-component@next)
• [email protected]

I tried importing the vue-upload-component like this:
(in the <script> section in my xxx.vue)

import FileUpload from 'vue-upload-component'
...
export default {
...
  components: {
    ...
    FileUpload
  }
}

then I come across an error:(without adding anything to the html)

and I found this in the node_modules/vue-upload-component/dist/vue_upload_component.js

I wonder whether I have done anything wrong. Wating for your help.

Please help

Help, I'm using the plugin, but I've not yet could ascertain how to upload that file to a folder on the server. The input html creates a temporary route, is not. I'm using Axios to make "ajax". This temporary php uses it to copy it from the temporary folder, but here where this. You have some super simple example which can be used. Thank you

上传成功或者取消上传之后，再选择同一个文件或另一个文件继续上传 控件没反应

只有F5刷新页面 控件才可以继续工作
如何重新初始化呢？

Auto upload not working for 2.0

Hi!! @lian-yue
I'm using vue-upload-compoent 2.0, but setting auto to true does not trigger auto upload when i and and drop files.

I'll push a PR to correct this issue.

data-v-156a06ea

我引入一个upload的.vue组件
然后全部元素都被data-v-156a06ea污染了，点击哪里都是上传....

2.3.0-beta.2之后的版本把单击选择文件改成了双击

2.3.0-beta.2之后的版本把单击选择文件改成了双击，我已经回退到了2.3.0-beta.2这个版本

多个文件一起选择上传有问题

最后只上传的全是最后一个文件

vue 2.0中无法使用events，现在的版本是不是不支持2.0？

一个页面多处上传组件的问题

作者好，如果一个页面上有多个上传组件，已经将组件name ref属性内容区分，但是触发上传后会同时触发该页面其他的上传组件。是否是我的处理思路有问题呢

调用其他页面的上传组件

我可以调用其他页面的上传组件吗？比如我把上传组件挂载到根上，这样跳转路由就不会刷新上传组件导致正在上传的失败了。

browser min.js support

Using without webpack, browserify

关于事件

你好，我看了下你的代码，目前有一点不清楚的地方，你代码里面并没有定义自定义事件，那例子里面的add,progress,after,before是怎么实现的呢？

Handling the raw file

Im trying to handle the raw file, but in the object files the data attribute is always empty, I can get the name, id, size etc. Do I have to do something specific to get the actual data?

可以删除全部文件吗包括阻止正在上传的

Does it work with vue 2.0

Hi,

Thanks for all your hard work on this component. Is the release for vue 2.x (https://github.com/lian-yue/vue-upload-component/tree/2.0) working now? The notes on this 2.0 repository have some 1.x options (props events) and the example given on the 2.x(https://lian-yue.github.io/vue-upload-component/) page is using vue 1.x. I have tried in a vue 2.x project and it's not working. Thanks for your help.

Why does your example not work?

Why does your example not work?

Issue: Threaded Upload

@lian-yue, so far it has been quite fun working with this component but noticed two additional issues with simultaneous uploads. The current version I am on is 2.3.0-beta.2

1. So, let's say I have 10 files to upload and I set the thread to 4. When I initiate the upload, it uploads the first 4, but the next 4 starts only after the completion of the first 4. Is there a way to keep continuity, so if 2 on the first session gets uploaded, then it automatically starts 2 more. At any point, there will be 4 simultaneous uploads instead of 4 at a time. I hope that makes sense.

2. When I have the thread set to 4 and if I try to upload files less than 3, then file upload fails. If I upload 3 files then the upload works.

3. When the thread is set to 4 and if I upload 5 files, the first 4 files are upload and the last files get canceled. If I upload 4, all 4 are uploaded.

4. As a request, Can you make the retry as part of the component itself, that way it can be configured with props :retries="2" to configure how many times to retry the upload.

How to retrieve the backend response ?

Hello.

I'm trying to implement your fabulous component in an application. All is working very well to choose files, and to send them via a post request. In my backend (under Laravel), I made a route that handles it and which is storing the uploaded files successfully. I made that post php route responding with each stored file path. My question is how, from the files array props, can I get these responded file paths in my frontend if I need it ?

Thank you very much for your work.

包下载后，无法加载组件

包下载后，我用browsrify无法build成功。错误信息是：

Error: Cannot find module '!!./../node_modules/css-loader/index.js!./../node_modules/vue-loader/lib/style-rewriter.js!./../node_modules/vue-loader/lib/selector.js?type=style&index=0!./FileUpload.vue'

我用的osx 10.10.5，项目是用browserify ＋ vue。
我担心是不是没有加载依赖包，npm install之后，还是报错。麻烦@lian-yue 帮忙看一下。

return?

https://github.com/lian-yue/vue-upload-component/blob/2.0/src/FileUpload.vue#L128

Request: Styling upload control

Ability to style controls or allow attaching an existing element to trigger the file upload control.

vue2.0 using tree2.0 examples reports error

click item and choose an file to upload then console shows msgs:

vue-upload-component.js?6302:856 Uncaught TypeError: Cannot set property 'h9wltv39qtuvqondzf5gq4cxr' of undefined

code follows:

`

<script> import FileUpload from 'vue-upload-component' export default{ data(){ return {} }, methods:{ }, components:{ FileUpload } } </script> `

Uncaught ReferenceError: Vue is not defined

npm install 然后
如下方法导入组件
import FileUploadComponent from 'node_modules/vue-file-upload-component/vue.file-upload.js'
运行console 显示如题错误。

存在不发put请求的配置项吗？

看起来目前是默认发put请求？那设置里的postAction有何作用呢？

Error after 2.3.0

[Vue warn]: Error in callback for watcher "files": "TypeError: Cannot read property 'fgc6n1j1i6sem5vqm06qrggb9' of undefined"

found in

--->

Update:
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected] <- 2.3.0-beta.2

API友好一点会有更多的人关注的

只支持img吗？是否能支持mp3

还有mp4，各种文件类型。
如果已经可以支持，能否出一个文档？谢谢

Upload to Amazon S3

I'm trying to implement Amazon S3 upload using your component.

I faced the issue with getting 400 (Bad Request) on every try.

After short investigation, I noticed that according to AmazonS3 docs

The file or content must be the last field in the form.

But in requests generated by vue-upload-component the file field is first. I
Is there any way to change the order of the form-data?

Component is not a constructor

im getting err Component is not a constructor

2.0.0-beta reports error

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "files" (found in component )

vue2.0怎么触发process事件，照着例子来也没触发

file upload success event

version: 2.4.0-beta.1

有文件上传成功的事件吗?
类似于:

<file-upload v-model="files" @success="Function(files)"></file-upload>

old version:

<file-upload :events="events"></file-upload>

events: {
  after(file, component){
  },
},

我记得之前的版本有个events, events里面可以设 after 函数,

这个版本升级, API 变动有点大, 没有兼容之前的版本;
难到用 watch 吗? 感觉不好用

data() {
  return {
    files: [],
  },
},
watch:{
  files(val, oldVal){
    if (val[0] && val[0].success) {
      // do something ...
    }
  },
}

完善一下列子,看不懂如何用的2.0

双向绑定失败

大兄弟，你组件的 _events 方法估计把Vue内置的关于双向绑定的方法替换了，导致我想传一个双向绑定的props就跪了，数据能传的进去，但绑定就失效了，建议你_events换个名字吧

上传的时候如何发送额外的参数