Vue3 组件封装——文件上传

1. 默认方法

使用 input 标签设置 type = file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file"> 
</body>
</html>

2. 设置其他元素

直接使用 input 标签设置 type = file 进行选取，要改样式的话，就隐藏 input 标签，设置上传按钮点击事件为 input.click() 进行点击上传

<div class="upContain">
<div class="t-uploader" @click="open">
<input type="file" style="display: none"/>
<i class="iconfont">&#xe889;</i><br />
<span>将文件拖到此处，或点击上传</span>
</div>
<span>只能上传图片，且不能超过 500M </span>
</div>
 
<script>
const open = () => {
  const input = document.querySelector('input')
  input.click();
};
</script>

二、获取上传的文件

1. 文件名获取

文件信息的获取相对简单，在 input 标签上绑定 change 事件，默认参数中 e.target.files 就是上传文件数组中的详细信息

将文件信息存入全局数组中，在 DOM 中渲染

<div>
  <tButton  @click="open">点击上传文件</tButton>
      <input
          type="file"
          style="display: none"
          @change="getFile"
       />
      <span class="message">只能上传...文件，且不超过...</span>
    
    // 文件列表渲染
    <div class="fileList">
    <li v-for="(item, index) in fileList" :key="index">
      <span><i class="iconfont">&#xe6cc;</i>{{ item.name }}</span>
      <i class="iconfont" @click="deleteFile(index)">&#xe600;</i>
    </li>
  </div>
</div>
 
 
<script>
const open = () => {
  const input = document.querySelector('input')
  input.click();
};
 
const fileList = [];
 
const getFile = (e) => {
  // 将新上传的文件加入数组
  fileList.unshift(...e.target.files);
};
 
// 文件删除
const deleteFile = (index) => {
  fileList.splice(index, 1);
};
</script>

2. 图片渲染
new 一个 FileReader 实例，并调用 readAsDataURL 方法传入参数 file 来读取选中的图像文件，最后在 onload 事件中，获取到成功读取的文件内容。
最后插入一个 img 节点设置 src = reader.result 显示选中的图片

function readFile(file){ 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function(e){
        // 图片内容
        console.log(reader.result);
    } 
}

效果展示：

编辑