vue 实现上传组件

1.介绍

效果如下图

 

2.思路

文件上传的两种实现方式

1.from形式

form的method属性指定为 "post" 请求，通过html表单发送数据给服务器，并返回服务器的修改结果，在这种情况下content-type是通过在<form>元素中设置正确的enctype属性。

form的enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。

• application/x-www-form-urlencoded(默认值):表示在发送前编码所有字符,数据被编码成以"&"分隔的键值对，同时以"="分隔键和值，("name=seven&age=19")。不支持二进制数据。
• multipart/form-data:支持二进制数据（上传文件时必须指定）
  

2.javascript异步请求形式

我们知道 formdata 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过xmlhttprequest.send()方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

formdata接口

3.生命周期

上传组件也有它的生命周期

beforeupload --> uploading --> fileuploaded 或者 uploadederror

4.代码草稿

本例中采用js异步请求的方式开发上传组件

5.具体实现

使用示例：

以上就是vue 实现上传组件的详细内容，更多关于vue 上传组件的资料请关注其它相关文章！