marchfantasy / vue-file-upload Goto Github PK
View Code? Open in Web Editor NEWvue.js ,vue-loader 上传文件,vue-file-upload,vue上传文件组件
vue.js ,vue-loader 上传文件,vue-file-upload,vue上传文件组件
window系统兼容性很差 file对象type拿不到
上传完成后我要获取返回的一个值,能实现么?
兼容性如何。
0.0.7支持1.x
之后支持2.x
组件无法创建DOM , 求帮助 QQ460016484
如题,升级了之后发现没有css样式了
你好,目前就发现小米手机封装在app里的时候 上传图片是 response 返回的null
可以用 html 模板做个 demo 吗?
在下有2个问题:多谢回答
PS: 这里没有服务器不方便测试。
我希望使用svg作为按钮图片,
希望能够自定义按钮部分的内容,
将title部分设置为 slot挺好的。
<span class="vue-file-upload">
<i v-if='icon != null' v-bind:class='rendIcon'></i>
<slot>{{label}}</slot>
<input ref="fileInput" type="file" name="file">
</span>
I have find some picture can't upload in wechat(android), the netWork express that wechat can't correct load some picture because lack of "base 64".
I don't know how to resolve the problem in vue-file-upload ----
and thanks your code(Maybe I should use Chinese to express)
如何以引入js文件的方式使用呢?
需要指定格式才能上传;
现在getAll()方法在内部,自动上传的时候,在上传之前,请问,在组件外面能判断是单个还是多个上传吗?
https://github.com/marchFantasy/vue-file-upload/issues/48 用#48里边的方式修改url不生效
在单传的时候,如果上一张还没传完,我立刻选择下一张(选完后我触发file.upoload),或者不断选多张(动作够快),这时候,只会处理到上传第一张,后面选择的都没有动作,待上传、有办法解决这种吗?
主要是我们的场景太奇葩啦,没法一次性全部去传。场景大概如下:选完图片,先向后端获取一个上传地址和当前这个图片的重命名,我接下来再传图片的附带参数去修改这些值,改完再触发file.upload....每张图片都需要后端重命名,而且,在这一步,后端那边还要核对上传图片的名字对不对,造成我无法全部改名后再自己批量传。。。无奈。
我感觉批量上传的时候,上传队列时,每一个文件能有一个上传前的方法应该就可以解决,哈哈。
我文件上传成功了,队列结束了,
然后我又把图片删除了(图片即使上传的)从files数组里删除,怎么再重新上传图片,我选择了文件没反应
源代码this.fileUploader.clearQueue()清除队列的,没发现重置的
请教下怎么处理
多个上传按钮,是共用一个FileList么?
我看源码(src/vue-file-upload.vue)里是这样写的
<input ref="fileInput" type="file" name="file">
var elTargetFiles = _.isHTML5() ? this.$refs.fileInput.files :this.$refs.fileInput;
这个ref是写死的,那多个按钮就是调用的就是同一个fileInput,拿到的就是同一个文件列表?能不能把不同按钮的FileList分割开??
RT,麻烦楼主解答。。。
您好!项目中原先使用的AjaxFileUpload,但是发现在IE9里面无法携带自定义的header参数(spring security的安全校验),导致了再IE9里面文件上传被服务端当成了未授权操作。
看到您这个vue插件,想了解一下兼容性问题
公司最近需要做前端大文件上传的功能,不知道大神做过相关尝试吗????
It would be nice to be able to change how the file button looks, instead of always using the default green button set by CSS inside the Vue component. I'd suggest not setting style in the component file and adding a prop to add custom classes to the input file tag.
Other than that, you did a great job. This is the best Vue file upload component I've tried. Sorry I don't speak chinese.
现在的回调是每次上传完一个就执行一下
有没有全部上传完毕 执行的回调呢
It said File is not defined when I upload on IE 9.
post url可否利用vue-resource?而不是固定写在html里
data() {
return {
newKeyword:'',
keywords:[],
category:'123',
files: [],
//xhr请求附带参数
reqopts:{
formData:{
category: this.category,
keywords: this.keywords,
testString:'test',
testArray:[1,2,3],
},
responseType:'json',
withCredentials:false
}
}
},
上面这段代码中,category和keyword都是vue里的data,都是被绑定到dom上的。但是放在formdata中,keywords和category最后都会显示undefined。
那应该怎么自定义需要发送的数据(比如array)给服务器呢?
<vue-file-upload
ref="lrFrontUploader"
:url="uploadUrl"
:filters="uploadFilters"
:events="lrFrontUploadEvents"
:request-options="requestOptions"
:auto-upload="true">
<span slot="label">上传</span>
</vue-file-upload>
// 上传文件xhr请求参数
requestOptions: {
formData: {},
responseType: 'json',
withCredentials: false,
headers: {
'customHeader': 'aaa'
}
}
以上代码后,请求的header里面没有customHeader
只要把<span slot="label">上传</span>
去掉后,请求的header里就会添加上customHeader
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"vue-file-upload": "^0.1.6",
"axios": "^0.17.1",
"qs": "^6.5.1",
"element-ui": "^2.0.4",
"lodash": "^4.17.4",
"raven-js": "^3.20.0"
}
"webpack": "^3.6.0"
reqopts 里 formData 参数,“上传所有文件”的时候,每个文件上传都需要配置一个 key 而且 key 值不同,请问如何设置?
在七牛上传时,遇到的这个场景需求。项目例子地址:https://github.com/cag2050/vue_file_upload_demo
我pc上好好的,但是做成cordova然后文件选择上传,file是空的,获取不到上传文件。不知道是不支持,还是我自己的问题!你们遇到了吗
问题主要是我使用的时候没有destroy的过程导致他不会自动清空队列。挨个调用remove()好像太麻烦了。
看源码发现原来类里已经提供了这样一个方法,于是就直接调用了。
另外还有一个问题是:你的组件监听input的change事件来更新文件队列。当我选择了一个文件加入,再用remove方法把它从队列中清除后,input的value没有改变,导致无法再次选择这个文件来把它添加到队列中。这个问题在demo里就存在。
目前的解决方案是添加以下两行手动重置组件状态:
this.$refs.uploader.$refs.fileInput.value = '';
this.$refs.uploader.fileUploader.clearQueue();
按理说我不该直接操作组件里封装的内容的,希望能添加一个重置的方法。
hi,
when i run your project, error exist, can you help me fix this issue ?? thanks ~
$ npm run dev
[email protected] dev F:\vue\loadfile1\vue-file-upload
webpack-dev-server --hot --inline --content-base ./demo
'webpack-dev-server' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "F:\nodejs\node.exe" "F:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev"
npm ERR! node v6.10.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: webpack-dev-server --hot --inline --content-base ./demo
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'webpack-dev-server --hot --inline --content-base ./demo'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-file-upload package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --hot --inline --content-base ./demo
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-file-upload
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-file-upload
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! F:\vue\loadfile1\vue-file-upload\npm-debug.log
onCompleteUpload 方法用 this 把结果返到到vue里的data里不行的
@param {Object:requestOptions} [请求附加参数: formData:{},headers:{},responseType:'json',withCredentials:false]
这个参数怎么传进去呢?我试了试貌似不管用,能提供下demo吗?
我的:
requestOptions:{
headers: {
demo:'yemeishu',
Origin: 'https://wx.qq.com'
},
formData: {
webwx_data_ticket:'AQfqbTaaJaVhba7t1qqXpsno'
},
responseType:'json',
withCredentials:false
},
<upload :url="imgUpdateUrl" :file="[]"></upload>
<upload :url="imgUpdateUrl" :file="[]"></upload>
<upload :url="imgUpdateUrl" :file="[]"></upload>
后端小白 求助~~
为什么我设置了withCredentials:true,但是请求的时候任然带不上cookies
求助解答
我自己写了个简单的上传demo是可以上传的。 用这个库上传不了,查了好久 不知道哪里出问题了。
再次确认了下 不是库导致的 是multiple导致的。当multiple为true时,无法上传视频
不知道作者的这个 现在版本是否可以预览
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.