vue 实现上传组件

1.介绍

效果如下图

 

2.思路

文件上传的两种实现方式

1.From形式

  
  Submit

form的method属性指定为 "post" 请求，通过HTML表单发送数据给服务器，并返回服务器的修改结果，在这种情况下Content-Type是通过在

元素中设置正确的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"，它会使用和表单一样的格式。

var formdata = new FormData(); // 创建FormData对象
formdata.append("name","laotie"); // 通过append()方法添加新的属性值
... // 更多方法请点下面链接

FormData接口

3.生命周期

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

beforeUpload --> uploading --> fileUploaded 或者 uploadedError

4.代码草稿

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

// 创建一个file类型的input，用于触发文件上传，后面可以把input隐藏掉，自定义好看的样式
// 自定义样式的时候可以用slot区分不同上传状态的样式（loading，success，defult）

const handleFileChange = (e:Event)=>{
  const target = e.target as HTMLInputElement
  const files = Array.from（target.files）// 注意这里取得的是一个类数组
  if(files){
    // 取得文件
    const uploadedFile = files[0]
    
    if(!validateFormat) return
    // ...这里只是提供一种思路，具体校验不再讲述
    // 在这里做一些上传文件前的校验，比如文件格式，大小等，
    // 不符合要求的话就不在继续发送请求
    
    const formData = new FormData()
    formData.append(uploadedFile.name,uploadedFile)
    
    axios.post('/upload',formData,{
      headers:{
         // 注意设置编码类型
        'Content-Type': 'multipart/form-data'
      }
    }).then(res=>{
      console.log('上传成功')
    }).catch(error =>{
      // 文件上传失败
    }).finally(()=>{
      // 文件上传完成，无论成功还是失败
      // 这里可以清除一下input.value
    })
  }
}

5.具体实现

// Upload.vue

使用示例：

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