使用Vue3实现一个Upload组件的示例代码

通用上传组件开发

开发上传组件前我们需要了解：

• FormData上传文件所需API
•  dragOver文件拖拽到区域时触发
• dragLeave  文件离开拖动区域
• drop文件移动到有效目标时

首先实现一个最基本的上传流程：

基本上传流程，点击按钮选择，完成上传

代码如下：

结果如下：

到这里我们基本的上传已经处理完成了，相对来说还是比较简单的，接下来我们创建Uploader.vue文件用来封装Upload组件。

我们需要实现如下功能

自定义模版

我们知道使用系统自带样式比较难看所用我们需要如下处理：

• 对样式进行优化，隐藏input
• 点击
  使用js出发input的click事件
• 处理上传状态

代码如下：

现在我们已经完成了对上传组件样式的优化，和上传状态的处理，接下来我们需要处理文件上传列表

支持文件上传列表

处理文件上传列表我们需要有如下实现：

• 显示文件名称
• 状态
• 可删除
• 显示上传进度
• 有可能有更丰富的显示

在上一步代码的基础上做一些修改：

• 首先我们定义上传文件对象接口类UploadFile
  
• 创建了一个filesList响应式对象
  
• 去掉了fileStatus，因为在UploadFile接口中我们已经有定义status
• 修改模版中的状态，利用computed来判读是否是处于上传状态，并增加slot进行自定义
• 展示上传的图片
• 处理上传进度
• 处理删除

注意点：如果选择相同的图片不会进行上传操作，因为我们使用的是input的change事件，所以我们需要在上传后将input的value设置为null

支持一系列生命周期钩子事件，上传事件

beforeUpload

实现步骤：

• 在poops处定义属性beforeUpload，同时定义上传文件为boolean或promsie且接受一个File
• 将原上传方法进行封装为postFile
• 根据beforeUpload返回结果，进行接下来的流程处理

onProgress，onSuccess，onError，onChange与之类似

拖拽支持

大致流程如下图：

• dragover和dragleave添加和删除对应的class
• drop拿到正在被拖拽的文件，删除class，并且触发上传
• 只有在属性drag为true才能触发

需要注意v-on的使用具体可参考vue官方文档

上代码：

以上就是基本的基于vue3实现的上传通用组件
另附上上传接口代码：

// 引入模块
const Koa = require('koa');
const fs = require('fs');
const path = require('path');
const router = require('koa-router')();
const koaBody = require('koa-body');
const static = require('koa-static');
const cors = require('koa2-cors')
 
// 实例化
const app = new Koa();
 
app.use(koaBody({
  multipart: true, // 支持文件上传
  formidable: {
    maxFieldsSize: 2 * 1024 * 1024, // 最大文件为2兆
    multipart: true // 是否支持 multipart-formdate 的表单
  }
}));
 
const uploadUrl = "http://localhost:3001/static/upload";
 
// 配置路由
router.get('/', (ctx) => {
  // 设置头类型, 如果不设置，会直接下载该页面
  ctx.type = 'html';
  // 读取文件
  const pathUrl = path.join(__dirname, '/static/upload.html');
  ctx.body = fs.createReadStream(pathUrl);
});
 
// 上传文件
router.post('/upload', (ctx) => {
  // 获取上传文件
  const file = ctx.request.files.file;
  console.log(file);
  // 读取文件流
  const fileReader = fs.createReadStream(file.path);
  // 设置文件保存路径
  const filePath = path.join(__dirname, '/static/upload/');
  // 组装成绝对路径
  const fileResource = filePath + `/${file.name}`;
 
  /**
   * 使用 createWriteStream 写入数据，然后使用管道流pipe拼接
   */
  const writeStream = fs.createWriteStream(fileResource);
  // 判断 /static/upload 文件夹是否存在，如果不在的话就创建一个
  if (!fs.existsSync(filePath)) {
    fs.mkdir(filePath, (err) => {
      if (err) {
        throw new Error(err);
      } else {
        fileReader.pipe(writeStream);
        ctx.body = {
          url: uploadUrl + `/${file.name}`,
          code: 0,
          message: '上传成功1'
        };
      }
    });
  } else {
    fileReader.pipe(writeStream);
    ctx.body = {
      url: uploadUrl + `/${file.name}`,
      code: 0,
      message: '上传成功1'
    };
  }
});
 
// 配置静态资源路径
app.use(static(path.join(__dirname)));
// 开启跨域
app.use(cors())
// 启动路由
app.use(router.routes()).use(router.allowedMethods());

// 监听端口号
app.listen(3001, () => {
  console.log('server is listen in 3001');
});

写在最后

已上只是一个简单的实现，当然了我们也可以添加自定义headers，自定义传递数据data，accecpt等等

到此这篇关于使用Vue3实现一个Upload组件的示例代码的文章就介绍到这了,更多相关Vue3 Upload组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！