Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uploader的complete事件触发时机问题 #29

Closed
lwpassvoice opened this issue Apr 10, 2018 · 31 comments
Closed

Uploader的complete事件触发时机问题 #29

lwpassvoice opened this issue Apr 10, 2018 · 31 comments
Labels

Comments

@lwpassvoice
Copy link

发现选择文件后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;
},

`
image

@dolymood
Copy link
Member

我试了demo是没问题的,能贴更多代码吗

@lwpassvoice
Copy link
Author

`

fileAdded (file, e) {
  console.log('fileAdded', file, e)
  this.isComplete = false;
  this.isUploading = true;
  this.fileList.push({
    file,
    progress: 0,
    speed: 0,
    status: 1,
    name: file.name,
    icon: getFileType(file.name),
    FileInfo: {},
    Sort: this.fileList.length
  });

  uploaderInstance.on('fileProgress', (rootFile, file, chunk) => {
    let fId = file.uniqueIdentifier;
    this.uniqueIdentifierJudge(fId)
      .then(idx => {
        let progress = parseInt(file.progress() * 100);
        this.fileList[idx]['status'] = 1;
        this.fileList[idx]['progress'] = progress;
      })
      .catch(err => {
        console.error(err)
      })
  })
},

filesSubmitted () {
  uploaderInstance.upload()
},

fileSuccess (rootFile, file, message, chunk) {
  console.log('success==================', rootFile, file, 1, message, 1, chunk)
  let objMsg = JSON.parse(message);
  let fId = file.uniqueIdentifier;

  this.uniqueIdentifierJudge(fId)
    .then(idx => {
      this.fileList[idx]['status'] = 2;
      this.fileList[idx]['FileInfo'] = {
        FileId: objMsg['FileId'],
        LatestVersionId: objMsg['LatestVersionId'],
        FileName: objMsg['FileName']
      }
    })
    .catch(err => {
      console.error(err)
    })
},

`

谢谢

@dolymood
Copy link
Member

这代码看不出来啥问题,希望提供完整demo或者线上链接,以及复现步骤、过程

@lwpassvoice
Copy link
Author

lwpassvoice commented Apr 12, 2018

复现步骤:
1、进入创建页
2、限制网速
3、点击选择文件
4、文件还未上传完,complete执行了
谢谢

@lwpassvoice
Copy link
Author

我发现 autoStart改成false就正常了

@dolymood
Copy link
Member

你的 filesSubmitted 中不需要再次调用 upload 了

这个属于 upload check 部分逻辑问题,后续我会修复下 - 对于重复调用 upload 的情况

@dolymood dolymood added the bug label Apr 12, 2018
@lwpassvoice
Copy link
Author

好的,thanks

@xuchao321
Copy link

识别不出来文件还是图片 每个item前面 都是俩个竖线 没有文件夹那种图片

@xuchao321
Copy link

1523599159 1

@xuchao321
Copy link

@lwpassvoice 你好可以问一下 你那个 怎么写的么 可以贴一下代码吗?

@dolymood
Copy link
Member

https://github.com/simple-uploader/vue-uploader/blob/master/README_zh-CN.md#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD-3

这里有 fileCategory 可以使用,是文件分类 根据文件的 ext 区分的,默认规则如下:

https://github.com/simple-uploader/vue-uploader/blob/master/src/components/file.vue#L90-L106

至于你说的显示不出来估计是不认识的问题吧,默认展示如下:

https://github.com/simple-uploader/vue-uploader/blob/master/src/components/file.vue#L356-L378

你可以选择通过对应的 class 去覆盖样式达到自己想要的效果

@lwpassvoice
Copy link
Author

@xuchao321 我是根据上传文件列表自己写的css

@xuchao321
Copy link

@lwpassvoice 如何写的可以给一个提示吗 calss名字加在哪里

@xuchao321
Copy link

1523607022 1
@dolymood 你好这些插槽 我怎么调用啊

@xuchao321
Copy link

@dolymood
1523607117  @1
在这里

@lwpassvoice
Copy link
Author

@xuchao321 你选择文件后,把参数打印出来看就知道了,file-added里也有

@xuchao321
Copy link

@lwpassvoice
1523608937 1

你好 打印出来了 也没有那么多属性啊

@lwpassvoice
Copy link
Author

@xuchao321 自己遍历fileList,生成想要的html
image

@xuchao321
Copy link

@lwpassvoice 哦 在这里取值 谢谢 那个样式怎么搞啊 0.0 class名字加在哪里 0.0

@lwpassvoice
Copy link
Author

@xuchao321 css\html自己写,v-for遍历fileList
。。。

@xuchao321
Copy link

把这个标签去掉么 大神 @lwpassvoice 真是太感谢了

@xuchao321
Copy link

<uploader-list></uploader-list>

@lwpassvoice
Copy link
Author

@xuchao321
fileList保存到data里,
然后自己做处理
<ul class="list part-s"> <li v-for="(file, idx) in fileList"> <div class="mask" v-show="file.status === 1 || file.status === -1"> <div class="progress" v-show="file.status === 1"> <div class="progress-con"> <div class="progress-bar"> <div class="progress-curr" :style="{ width: file.progress + '%' } "></div> </div> <p class="pos-middle">{{file.progress}}%</p> </div> </div> <div class="reply" v-show="file.status === -1" @click="reply(idx)"></div> </div> <div class="del" @click="fileDel(idx)"> <img src="../../static/img/btn_remove_normal.png"> </div> <img class="icon" :src="'../../static/img/ico_file_' + file.icon + '.png'"> <h4>{{file.file.name}}</h4> </li> </ul>

@xuchao321
Copy link

哦 好的!谢谢了 我研究下
@lwpassvoice

@xuchao321
Copy link

@lwpassvoice 你好能否看看您那个是怎么设的样式吗 css 我这里就显示个名字!

@xuchao321
Copy link

1523611365 1
1523608937 1
1523611421 1
打印fileList 怎么有的参数没有啊

@xuchao321
Copy link

@lwpassvoice

@xuchao321
Copy link

@lwpassvoice 要改这个样式的话 是不是逻辑什么都得从写啊 大神 进度条什么的还有吗

@xuchao321
Copy link

@dolymood 你好 那个《slot :file》这里面的属性我如何取得到啊 上面有截图 谢谢

@xuchao321
Copy link

@dolymood 你好fileCategory这个方法我怎么可以取到啊 如何使用 还有class这个加在那个dom上

@hasbug
Copy link

hasbug commented Aug 22, 2018

@xuchao321 解决了吗? 是不是进度条 各种判断都得重写?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants