simple-uploader / vue-uploader Goto Github PK

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

触发了两次click事件，第二次选择文件后才会触发change事件

$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

试着把源码里的button改成了label就可以了

是否已二进制的流的方式发送文件

点击前 http://localhost:7067/#/home/fileEdit
点击选择按钮后，页面刷新，http://localhost:7067/?#/home/fileEdit

将npm dist中的button改为span，正常。

上传提示{success，error，uploading，paused，waiting}怎么配置多语言？

我发现在分块上传的场景下，假如分为3块，有时候并不是第三块才触发，而是可能是前面的块，我发现可能第三块上传完成了 其他的可能还在上传中。
我的项目这边目前是所有块上传完成后才进行合并，不是最后一块的话，一般都返回200状态而已，只有第三块才返回上传后的结果url。如果在其他块触发了fileSuccess，那么，我就错过了后端的返回结果。