Vue3 组件封装——文件上传

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

Skybububu

6199人浏览 · 2023-06-10 23:50:34

Skybububu · 2023-06-10 23:50:34 发布

组件库地址：欢迎大家到 Github 中 Star

Skybiu-ui | 一个Vue3组件库A VitePress sitehttps://sky0258.github.io/skybiu-ui/

一、从本地选取文件

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);
    } 
}

后台打印

这些一长串的东西设置成 img 标签的 src 路径值就会显示出你上传的照片了

问题出现！！！

如果你想把路径都放进一个数组中，然后再组件中，循环渲染出图片的话，你会发现你在全局申请一个变量 imgSrc ，然后在 onload 中设置

imgSrc = reader.result;

结果是无效的，imgSrc 的值并没有发生变化

这是由于 onload 是异步的，所以无法直接赋值，那么只能采取 promise 进行处理

具体代码

// 处理文件函数
function getSrc(file) {
  return new Promise(function (resolve, reject) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      console.log(reader.result);
      resolve(reader.result);
    };
  });
}

const imgList = [];

// 获取文件路径放入 imgList 数组
const getImgFile = (e) => {
  const files = e.target.files;
  for(const file of files) {
      getSrc(file)
      .then((res) => {
          imgList.push(res);
      })
      .catch((err) => {
          console.log(err);
      });
  }
}

组件中循环渲染

<ul class="imageList">
  <li v-for="(src, index) in imgList" :key="index">
    <img :src="src" alt="" />
  </li>
</ul>

效果图

这样就可以成功获取图片啦！！！

GitHub 加速计划 / vu / vue

207.54 K

33.66 K

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：2 个月前 )

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前

e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m