simple-uploader / vue-uploader Goto Github PK
View Code? Open in Web Editor NEWA Vue.js upload component powered by simple-uploader.js
License: MIT License
A Vue.js upload component powered by simple-uploader.js
License: MIT License
How can I set multi-language for status {success ,error ,uploading,paused,waiting}
How to upload files directly to s3? Can I implement some intermediate calls to obtain final upload url?
file added => server call to obtain s3 upload url => upload file to this particular url
Thanks.
0.5.2版本存在IOS兼容问题,测试机9.x+ 10.3.3都存在:选择文件后,没有后续反应。
hi,请教一下怎么做到传完1块或多块切片停顿一段毫秒,再接着传,为了缓解上传占用宽带太高的问题。
Module build failed: ReferenceError: Unknown plugin "add-module-exports" specified in "/Users/xiangchengli678/vogue/node_modules/vue-simple-uploader/.babelrc" at 1, attempted to resolve relative to "/Users/xiangchengli678/vogue/node_modules/vue-simple-uploader"不懂是什么原因?
咱们貌似没有字段进行限制input表单的multiple属性?
然后,目前我给自己上传组件传入一个数值,告诉组件剩余可传文件数,例如:maxCounts:0 ,然后我在file-added设置
if(this.maxCounts==0){
Toast('图片已达上限')
file.ignored = true
}
,按住ctrl进行多选文件,选择数量超过1个,点击完成添加,但并未提示,而是直接全部开始上传了。
<uploader :options="options"></uploader>
options: {
target: this.genTarget,
}
// 选择rmvb为 "", mp4为video/mp4
genTarget(file) {
file.fileType;
}
版本0.4.6
我的问题 sorry
你好,这样写对吗?但是没有过滤掉,还是上传了
<uploader
:options="options"
ref="uploader"
@file-added="fileAdded">
</uploader>
methods: {
fileAdded (file) {
if (file.size > 0.5 * 1024 * 1024) {
console.log('文件大于0.5M')
file.ignored = true
}
}
}
发现选择文件后complete事件会触发,上传成功后也会再次触发
请问这里是否有问题
`
<uploader
class="uploader-example"
ref="uploader"
:simultaneousUploads="5"
:options="options"
:autoStart="true"
:permanentErrors="[401, 404, 415, 500, 501]"
@file-added="fileAdded"
@files-submitted="filesSubmitted"
@file-error="fileError"
@file-success="fileSuccess"
@complete="complete">
不支持此功能,请升级微信或浏览器
选择文件
`
`
complete() {
console.log('complete');
this.isComplete = true;
this.isUploading = false;
},
方便大家学习讨论和请教。
需要如下操作:
this.$refs.uploader.uploader.fileList=[];
this.$refs.uploader.uploader.files=[];
this.$refs.uploader.fileList=[];
this.$refs.uploader.files=[];
-----------为什么需要同时清除uploader.uploader 和 uploader呢????
请博主给予回复。 3ku
As mentioned in usage, I have this:
import Vue from 'vue'
import App from './App'
Vue.use(uploader)
new Vue({
el: '#mountPoint',
router,
template: '',
components: { App },
})
But when I try to use it in another single file component like this:
export default {
name: 'upload',
mounted(){
const uploaderInstance = this.$refs.uploader.uploader
console.log(uploaderInstance)
}
}
I get only Error in mounted hook: "TypeError: Cannot read property 'uploader' of undefined".
I tried to import it before export default:
import uploader from 'vue-simple-uploader'
export default{...} and use it like uploader.files but I still got only undefined. Am I missing something or is it a bug and I have to register it somehow else?
如题:这个时间应该如何绑定?
现在的版本处理是上传的过程中,可以暂停和取消上传任务。但是上传完成后,如果用户需要删掉这个文件,就无法实现了
this.xhr.upload.addEventListener is not a function
$refs是空的呢
我试了按readme的写法新建项目,也是空的
这个是配置
`
"dependencies": {
"vue": "^2.5.2",
"vue-simple-uploader": "^0.3.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
`
I'm downloading the zip version of your repository and trying the npm install
run command. but it does not work.
The command reply is "npm WARN [email protected] No license field.".
上传成功后的视频都是分块的,可以做到不分块的上传吗?
兼容ie9 吗? 请问。 谢谢
例子里没有卡槽怎么用?
我用这样的方式:
test
好像不起作用,哪里出问题了吗?
options不是响应式的,只在create的时候赋值了,这样如果要动态改变option.query,没有任何效果,不能设置上传时的动态参数
你好,十分感谢你的项目,我想重新搞个进度条,在fileProgress()里调用uploader.progress()方法,但是多次上传,第一次progress()正常,之后progress()从很大的数开始。
<uploader
:options="options"
ref="uploader"
@file-progress="fileProgress">
</uploader>
mounted() {
this.$nextTick(() => {
this.uploader = this.$refs.uploader.uploader
}
},
methods: {
fileProgress() {
this.uploadProgress = Math.floor(this.uploader.progress() * 100)
console.log('progress: ' + this.uploadProgress)
}
}
上传了4次console
分块上传怎么支持同步吗,目前上传后台接受的块顺序是打乱的
option写在data中:
data () {
return {
options: {
target: `${REST}/api/File/Upload/{fileName}`,
testChunks: false,
headers: {
Authorization: 'SessionKey HCXNURQECL68XMIG5A3XHCEQMJ5Z1KYPMMTKVJDW0VNKEOCY2AJ9HGCYFS6JIIBC'
},
chunkSize: 20971520 * 1024, //20G
method: 'octet'
}
}
}
fileAdded事件判断文件类型,并上传到不同target
fileAdded(file){
if(this.fileList.length > 8){
alert("最多可以上传9个文件");
return false
}
if (file.fileType.indexOf('video') > -1) {
this.options.target = `${REST}/api/File`
} else {
this.options.target = `${REST}/api/File/Upload/${encodeURIComponent(file.name)}`
}
}
但是实际测试上传的target并不变化,data里的options.target的fileName也没办法改变
在Uploader组件上没有找到文件上传完成的事件
Element自带的组件的话,可以使用
this.$refs.xxxForm.resetFields();
来进行重置。
但是vue-uploader有提供类似的方法吗?
@files-submitted="filesAdd"
filesAdd(fileList){
console.log("2222222");
console.log(fileList);
for(var f in fileList){
if(fileList[f].size > 5 * 1024){
this.$message({
message: '存在单文件5K以上文件,请重新选择文件!',
type: 'error',
duration: 2000
});
break;
}
}
for(var n in fileList){
fileList[n].ignored = true;
}
}
还是可以继续上传
是否支持断点续传呢?
因为我需要拖拽的时候,接受的区域为整个页面,而不是页面中的那一小块。所以我想监听客户何时拖动,然后显示组件中拖拽区域的蒙层。
1.如上。或者是php端的。
你好,我自己搞了半天不行,用的是js-spark-md5插件,console可以得到,query却是undefined
// xx.vue
import { getMd5 } from './md5.js'
options: { // options配置
target: docUploadPath,
testChunks: false,
query: function(file) {
getMd5(file.file, function(md5) {
console.log(md5) // d6ff424312924d81646c3189b42cb5f5
return {'md5': md5}
})
}
}
// md5.js
import './spark-md5.min.js'
export function getMd5(file, callBack) {
var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
chunkSize = 8097152, // Read in chunks of 2MB
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
spark = new SparkMD5.ArrayBuffer(),
fileReader = new FileReader()
fileReader.onload = function (e) {
spark.append(e.target.result); // Append array buffer
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
callBack(spark.end())
}
};
fileReader.onerror = function () {
console.warn('oops, something went wrong.');
};
function loadNext() {
var start = currentChunk * chunkSize,
end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
}
问题如下:
uploader-unsupport,uploader-btn,uploader-list等都是全局注册,暴露给了全局。所以我们在使用作者组件时,需要按照如下方式,在页面写各种组件的标签:
<template>
<uploader :options="options" class="uploader-example">
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<p>Drop files here to upload or</p>
<uploader-btn>select files</uploader-btn>
<uploader-btn :attrs="attrs">select images</uploader-btn>
<uploader-btn :directory="true">select folder</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
</template>
而通常情况下,我们引入一个组件,只需要在页面中写入:
<uploader></uploader>
如果需要配置额外的选项,可通过props或者slot来自定义配置:
<uploader :options="options" class="uploader-example">
<slot></slot>
</uploader>
建议:
uploader中需要用到的组件,都在uoloader内部通过components方式布局注册,并将uploader-unsupport,uploader-btn,uploader-list等组件写到uploader.vue的template中。
Is is easy - first need to make simple-uploader.js module make to support SSR, I did this in fork vsorrokin/Uploader@860f0fe
And second - you need to provide in dist es6 module version of lib without using of window. For now I just import src/index.js from your lib
done
是否已二进制的流的方式发送文件
点击前 http://localhost:7067/#/home/fileEdit
点击选择按钮后,页面刷新,http://localhost:7067/?#/home/fileEdit
将npm dist中的button改为span,正常。
上传提示{success,error,uploading,paused,waiting}怎么配置多语言?
我发现在分块上传的场景下,假如分为3块,有时候并不是第三块才触发,而是可能是前面的块,我发现可能第三块上传完成了 其他的可能还在上传中。
我的项目这边目前是所有块上传完成后才进行合并,不是最后一块的话,一般都返回200状态而已,只有第三块才返回上传后的结果url。如果在其他块触发了fileSuccess,那么,我就错过了后端的返回结果。
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.