element 上传文件获得所选文件的路径地址

目前项目中需要上传大文件,浏览器端上传大文件的常用做法就是分片上传，项目前端用的是vue element,服务器用的是golang的开源框架 echo。

上传大文件如果传到一般断掉了，在全部重新上传的话那就太抓狂了，所以不只是分片上传还要断点续传。

既然是vue+element 那肯定就是通过npm + webpack构建的vue 项目了， 什么是 npm ，什么是webpack这里不介绍，网上的介绍很详细。 首先通过npm安装 vue-simple-uploader 安装命令 npm -i vue-simple-uploade r ,vue-simple-uploader 就是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件，自带 UI，可覆盖、自定义UI,如下图

具体使用方法

初始化：

import uploader from 'vue-simple-uploader'

Vue.use(uploader)

上传组件

:attrs="attrs"

:options="options"

:file-status-text="statusText"

class="uploader-example"

@file-added="onFileAdded"

@file-success="onFileSuccess">

选择文件

上传之前有一个分片检测是GET 请求，上传是POST请求，所以都是一个方法里面处理判断了一些是get 还是post

服务端就不BB了 直接贴代码

/分片上传func Upload(c echo.Context) error { var ( chunkNumber int //当前片数 chunkSize int64 //总分片总 currentChunkSize int64 //当前分片文件大小 totalSize int64 //文件总大小 identifier string //文件ID filename string totalChunks int //文件总大小 fileHeader *multipart.FileHeader file multipart.File dst *os.File err error currentPath string //上传目录 fileUrl string //保存文件完整路径 ) currentPath = utils.GetCurrentPath() + global.UPLOADDIR if len(c.QueryParams()) > 0 { //分片检测，有上传的片不上传,提高上传效率 identifier = c.QueryParams().Get("identifier") totalChunks, _ = strconv.Atoi(c.QueryParams().Get("totalChunks")) _, names := utils.GetDirList(fmt.Sprintf("%s/%s/