vue-simple-uploader 常见问题整理

  • A+
所属分类：Web前端
摘要

前言感谢大家的支持，我整理了一些 vue-simple-uploader 常见的问题和处理思路。大家遇到了问题或者对曾经的问题有了解决方案，都可以提出来，共享成果
便宜好用的国外VPS推荐

前言

感谢大家的支持，我整理了一些 vue-simple-uploader 常见的问题和处理思路。大家遇到了问题或者对曾经的问题有了解决方案，都可以提出来，共享成果

关于vue-simple-uploader的应用可以看我另一篇文章：https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html

github地址：https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader

option或者query怎么做成动态的？

query 可以是函数。

 query: (file, chunk) => {     return {         // 可以针对于每个file对象设置自定义的params         ...file.params,         id: file.id,         culture: this.$i18n.locale,     } },

target怎么做成动态的？

target 可以是函数

如何限制上传文件的个数或忽略某些文件？

在fileAdded或者filesAdded里面做判断，设置 ignore 属性为 ture 来过滤掉该文件

file-added(file), 添加了一个文件事件，一般用做文件校验，如果设置 file.ignored = true 的话这个文件就会被过滤掉。

files-added(files, fileList), 添加了一批文件事件，一般用做一次选择的多个文件进行校验，如果设置 files.ignored = true 或者 fileList.ignored = true 的话本次选择的文件就会被过滤掉。

如何自定义接口的请求参数？

比如项目中有自己风格的接口键名定义，比如
chunkNumber，想改成chunk-number；或者想自己魔改请求中的参数，可以使用 processParams 配置

processParams：处理请求参数，默认 function (params) {return params}，一般用于修改参数名字或者删除参数。0.5.2版本后，processParams 会有更多参数：(params, Uploader.File, Uploader.Chunk, isTest)。

动态修改 attrs 不成功的问题

因为作者只在 <uploader-btn>组件中的 mounted 中绑了一次attrs，也就意味着 attrs 不是动态的了。

可以找到原生的input后设置accept

const $input = $('#global-uploader-btn').find('input') const accept = opts.accept $input.attr('accept', accept.join())

关于一些自定义状态的展示（校验MD5、合并中等）

插件原本只支持了success、error、uploading、paused、waiting这几种状态，并且作者没有提供扩展api。

如果想要加一些自定义的状态，比如「校验MD5」、「合并中」、「转码中」、「上传失败」等，需要自己用一些额外的小手段，比如我的做法就是使用障眼法，自己写一个标签盖在原本的状态上，并且手动控制该状态的显示和移除。

关于秒传和分片检验的逻辑

在配置了 testChunks 为 true 后， 每次上传的最开始，插件都会先发一个 get 请求，来测试哪些分片在服务端已经上传过了；分片校验就是在这一步做的，插件有一个配置项是 checkChunkUploadedByResponse 函数，就是做秒传和断点续传的。每一个分片都会调用一次该函数，然后前端去根据后端返回的参数做判断，若该分片上传过了，返回 true 即可。

比如说后端可以这样做，如果一个文件已经上传过了，直接返回一个“跳过上传”的参数（比如skipUpload）。否则后端返回“已上传”的参数，比如 uploaded: [1, 10, 11, 12, 13]。

checkChunkUploadedByResponse (chunk, message) {     var objMessage = JSON.parse(message);          // 秒传     if (objMessage.skipUpload) {         return true;     }      // 断点续传，判断当前的chunk是否上传过     return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0 },

第一个分片会请求两次的问题

可能是因为你的 testChunks 设为了 false ，但是没删掉
checkChunkUploadedByResponse这个函数

开启了testChunk后服务器收不到第一个分片

testChunk的get请求，默认带了第一个分片给服务端，如果服务端返回的是 200 状态，则假定当前块已经上传过了，不会再上传了；

如果遇到这个问题，需要服务端改成其他http状态码，比如204，这样就不在“ 200, 201, 202”这个集合里了，代表服务端还没有这个块，需要按照标准模式上传，这样第一个分片就会再次被上传了。

最后一个分片大小大于chunkSize，但不会被自动分隔，如何处理？

设置 forceChunkSize 选项

forceChunkSize：是否强制所有的块都是小于等于 chunkSize 的值。默认是 false。

计算MD5的时候，最好隐藏“播放/暂停”按钮

因为此时md5值还未计算完，如果点击播放或暂停，则会得到插件本身的md5值

能不能给下后端代码？

后端不是小弟写的，只能给几个文章作为参考吧

https://github.com/LuoLiangDSGA/spring-learning/tree/master/boot-uploader

https://github.com/23/resumable.js/tree/master/samples

https://blog.csdn.net/oppo5630/article/details/80880224

便宜好用的国外VPS推荐