Vue + el-upload + Java 上传下载

上传

1.前端 (Vue+element UI)

 Vue + el-upload + Java 上传下载_第1张图片

js:

1.action

  首先为什么不用http-request ,我这边Content-type默认提交是application/json 文件上传的话类型必须是‘multipart/form-data’,使用action直接就给你转了 不用自己拼headers 非常方便,所以提供个方法动态获取请求路径就成

Vue + el-upload + Java 上传下载_第2张图片‘’

2.上传之前必要的判断

Vue + el-upload + Java 上传下载_第3张图片 

3.成功之后回调

对于组件来说 回调成功的含义是后台有返回值,不管返回啥 只要不抛异常就会调这个函数

Vue + el-upload + Java 上传下载_第4张图片

搞定啦! 

2.服务端(Java)

为了测试前端好使不 copy了一段上传,具体的根据你业务来咯 

Vue + el-upload + Java 上传下载_第5张图片 

下载

1.前端 (Vue+element UI)

 Vue + el-upload + Java 上传下载_第6张图片

 

2.服务端(Java)

忘了从哪里copy的了 反正一大堆 主要是为了测前端代码好使不好使来着。 重点关注解决下载文件乱码问题 

Vue + el-upload + Java 上传下载_第7张图片 Vue + el-upload + Java 上传下载_第8张图片

 Vue + el-upload + Java 上传下载_第9张图片

你可能感兴趣的:(Java,前端)