{"id":19066270,"url":"https://github.com/gaoyuyue/myuploader","last_synced_at":"2025-04-05T17:06:30.357Z","repository":{"id":47595964,"uuid":"137445427","full_name":"gaoyuyue/MyUploader","owner":"gaoyuyue","description":"单文件上传，多文件上传，大文件上传，断点续传，文件秒传，图片上传","archived":false,"fork":false,"pushed_at":"2018-11-18T05:31:21.000Z","size":1281,"stargazers_count":441,"open_issues_count":6,"forks_count":201,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T16:07:13.848Z","etag":null,"topics":["element-ui","javascript","myuploader","plupload","plupload-vue","vue"],"latest_commit_sha":null,"homepage":"https://gaoyuyue.github.io/MyUploader","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gaoyuyue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-15T05:40:18.000Z","updated_at":"2025-03-21T07:16:15.000Z","dependencies_parsed_at":"2022-08-12T13:41:03.960Z","dependency_job_id":null,"html_url":"https://github.com/gaoyuyue/MyUploader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoyuyue%2FMyUploader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoyuyue%2FMyUploader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoyuyue%2FMyUploader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoyuyue%2FMyUploader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaoyuyue","download_url":"https://codeload.github.com/gaoyuyue/MyUploader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369952,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-ui","javascript","myuploader","plupload","plupload-vue","vue"],"created_at":"2024-11-09T00:55:42.625Z","updated_at":"2025-04-05T17:06:30.338Z","avatar_url":"https://github.com/gaoyuyue.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MyUploader\n\n\u003e 单文件上传，多文件上传，大文件上传，断点续传，文件秒传，图片上传\n\u003e \n\u003e 后端项目地址： [https://github.com/gaoyuyue/MyUploader-Backend](https://github.com/gaoyuyue/MyUploader-Backend)\n\n[![Build Status](https://www.travis-ci.org/gaoyuyue/MyUploader.svg?branch=master)](https://www.travis-ci.org/gaoyuyue/MyUploader)\n[![GitHub license](https://img.shields.io/github/license/gaoyuyue/MyUploader.svg)](https://github.com/gaoyuyue/MyUploader/blob/master/LICENSE)\n\n# 简介\n项目采用前后端分离的方式进行开发，实现了几种常用的文件上传功能。\n前端采用 vue.js + plupload + element-ui 实现了文件在浏览器端的发送, 后端采用 spring boot + spring + spring mvc + mybatis 实现了文件在服务器端的接收和存储。\n\n***本项目为前端实现***\n# 效果图\n\u003e 演示地址： [https://gaoyuyue.github.io/MyUploader](https://gaoyuyue.github.io/MyUploader)\n\u003e\n\u003e *ps: 用git pages搭建的静态页面，只能演示前端功能*\n### 单文件上传\n![](https://i.imgur.com/vBr8ZJq.gif)\n### 多文件上传\n![](https://i.imgur.com/Db6eaMJ.gif)\n### 大文件上传\n![](https://i.imgur.com/qAyksE8.gif)\n### 断点续传\n![](https://i.imgur.com/I1G01MT.gif)\n### 文件秒传\n![](https://i.imgur.com/XHZHGeo.gif)\n### 图片上传\n![](https://i.imgur.com/HFZQnV3.gif)\n# 前端实现\n## 组件列表\n- 单文件上传（包含文件过滤功能）：[SingleFileUpload.vue](https://github.com/gaoyuyue/MyUploader/blob/master/src/components/SingleFileUpload.vue)\n- 多文件上传：[MultiFileUpload.vue](https://github.com/gaoyuyue/MyUploader/blob/master/src/components/MultiFileUpload.vue)\n- 大文件上传：[BigFileUpload.vue](https://github.com/gaoyuyue/MyUploader/blob/master/src/components/BigFileUpload.vue)\n- 断点续传：[StopUpload.vue](https://github.com/gaoyuyue/MyUploader/blob/master/src/components/StopUpload.vue)\n- 文件秒传：[QuickUpload.vue](https://github.com/gaoyuyue/MyUploader/blob/master/src/components/QuickUpload.vue)\n- 图片上传：[PictureUpload.vue](https://github.com/gaoyuyue/MyUploader/blob/master/src/components/PictureUpload.vue)\n## 引入plupload\n\u003e plupload版本: 2.3.6\n\u003e \n\u003e 官方文档： [https://www.plupload.com/docs/](https://www.plupload.com/docs/)\n\u003e \n\u003e 中文文档： [http://www.phpin.net/tools/plupload/](http://www.phpin.net/tools/plupload/)\n\n为了方便使用我将plupload封装为成一个vue组件[Uploader.vue](https://github.com/gaoyuyue/MyUploader/blob/master/src/components/Uploader.vue)\n\n**例子：**\n```vue\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n      \u003cuploader\n        browse_button=\"browse_button\"\n        :url=\"server_config.url+'/File/'\"\n        @inputUploader=\"inputUploader\"\n      /\u003e\n      \u003cel-button id=\"browse_button\" type=\"primary\"\u003e选择文件\u003c/el-button\u003e\n      \u003cspan v-for=\"file in files\"\u003e{{file.name}}\u003c/span\u003e\n      \u003cel-button type=\"danger\" @click=\"up.start()\"\u003e开始上传\u003c/el-button\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Uploader from './Uploader'\n  export default {\n    name: \"FileUpload\",\n    data() {\n      return {\n        server_config: this.global.server_config,\n        files:[],\n        up: {}\n      }\n    },\n    methods: {\n      inputUploader(up) {\n        this.up = up;\n        this.files = up.files;\n      }\n    },\n    components: {\n      'uploader': Uploader\n    },\n  }\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n\u003c/style\u003e\n```\n### 使用Uploader组件必须要配置的参数：\n- browse_button： 选择文件button的id\n- url： 文件上传地址\n- inputUploader方法： 用于获取uploader对象\n\n\n\u003e 为了获取uploader对象，自定义了inputUploader方法，需要在引用Uploader.vue的组件中实现inputUploader方法，inputUploader方法中传入了一个参数即uploader对象。*关于uploader对象及其他配置参数请参考plupload官方文档*\n\n## 计算文件MD5值（用于文件妙传）\n采用js-spark-md5.js, 项目地址： [https://github.com/satazor/js-spark-md5](https://github.com/satazor/js-spark-md5)\n\n**file-md5.js**\n```javascript\n'use strict';\n\nimport '../plugins/js-spark-md5.js'\n\nexport default function (file, callback) {\n  var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,\n    file = file,\n    chunkSize = 2097152,                             // Read in chunks of 2MB\n    chunks = Math.ceil(file.size / chunkSize),\n    currentChunk = 0,\n    spark = new SparkMD5.ArrayBuffer(),\n    fileReader = new FileReader();\n\n  fileReader.onload = function (e) {\n    console.log('read chunk nr', currentChunk + 1, 'of', chunks);\n    spark.append(e.target.result);                   // Append array buffer\n    currentChunk++;\n\n    if (currentChunk \u003c chunks) {\n      loadNext();\n    } else {\n      callback(null, spark.end());\n      console.log('finished loading');\n    }\n  };\n\n  fileReader.onerror = function () {\n    callback('oops, something went wrong.');\n  };\n\n  function loadNext() {\n    var start = currentChunk * chunkSize,\n      end = ((start + chunkSize) \u003e= file.size) ? file.size : start + chunkSize;\n\n    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));\n  }\n\n  loadNext();\n};\n```\n\u003e 文件秒传： 在添加文件后计算文件的MD5值，在文件上传前先向服务器传送MD5值查询此文件是否已上传，如果文件存在返回false将文件状态置为已上传，否则上传文件。\n\n## 图片预览\n使用FileReader读取文件并转成Base64编码字符串, 填入`\u003cimage/\u003e`标签的src属性上，即可实现图片预览功能。\n\n**file-url.js**\n```javascript\nexport default function (file, callback) {\n  if (!file || !/image\\//.test(file.type)) return;\n  let fileReader = new FileReader();\n  fileReader.onload = function () {\n    callback(null,fileReader.result);\n  };\n  fileReader.onerror = function () {\n    callback('oops, something went wrong.');\n  };\n  fileReader.readAsDataURL(file);\n}\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaoyuyue%2Fmyuploader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaoyuyue%2Fmyuploader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaoyuyue%2Fmyuploader/lists"}