vue3.2结合element-plus自定义上传组件

感觉el-upload自定义也没合适的文档,想自定义处理事件和处理文件的时候不方便。所以研究了一下。

首先给出基本操作:

javascript 复制代码
// vue中定义了上传的变量

const uploadFile = ref(null)

// 下面这个是可以显示具体有哪些操作
console.log(uploadFile.value)
uploadFile.value.abort(); // 取消上传
uploadFile.value.submit(); // 提交上传
uploadFile.value.clearFiles(); // 清空文件列表
uploadFile.value.handleStart(file); // 开始上传指定的文件
uploadFile.value.handleRemove(file); // 移除指定的文件

给出完整的代码:

javascript 复制代码
<template>
<el-scrollbar class="upload-file" min-size="100">
                    <el-upload
                        ref="uploadFile"
                        :multiple="true"
                        :on-change="handleChange"
                        :on-remove="handleRemove"
                        class="left-view"
                        :auto-upload="false"
                        accept=".gjf,.mol"
                    >
                      <template #trigger>
                        <el-button type="primary">选择文件</el-button>
                      </template>
                      <template #tip>
                        <div class="el-upload__tip text-red">
                        </div>
                      </template>
                    </el-upload>
                  </el-scrollbar>
</template>

<script setup>
import {ref} from 'vue'

const uploadFile = ref(null)
const handleChange = async (file, uploadFileRef) => {
  /*
  console.log(uploadFile.value)
  uploadFile.value.abort(); // 取消上传
  uploadFile.value.submit(); // 提交上传
  uploadFile.value.clearFiles(); // 清空文件列表
  uploadFile.value.handleStart(file); // 开始上传指定的文件
  uploadFile.value.handleRemove(file); // 移除指定的文件
  */
  const allowedExtensions = ['gjf', 'mol'];
  if (!allowedExtensions.includes(file.name.split('.')[1])) {
    ElMessage.error('只能上传Gjf或者mol格式的文件');
    // uploadFile.value.clearFiles()
    uploadFile.value.handleRemove(file);
  } else {
    // 保存文件内容
    fileList.push(file);
  }
}

watch(fileList, async (newVal, oldVal) => {
  // 等待500毫秒,以确保 fileList 变化稳定
  await new Promise(resolve => setTimeout(resolve, 500));
  // 清空 srcList 数组
  srcList.splice(0, srcList.length);
  // 使用 Object.keys() 遍历 fileList 的属性
  for (const key of Object.keys(newVal)) {
    const file = newVal[key];
    await showFileToImage(file);
  }
});


// 处理移除文件时候的操作
const handleRemove = async (file, fileList) => {
  let uid = file.uid
  const index = srcList.findIndex((file) => file.uid === uid);
  if (index > -1) {
    srcList.splice(index, 1);
  }
}
const showFileToImage = async (file) => {
  let reader = new FileReader();
  reader.readAsArrayBuffer(file.raw);
  return new Promise(resolve => {
    reader.onload = async function (event) {
      let image_data;
      if (file.name.split('.')[1].toLowerCase() === 'gjf') {
        // gjf转图片
        image_data = await ConvertFile2Image(reader.result, "gjf");
      } else if (file.name.split('.')[1].toLowerCase() === 'mol') {
        // mol转图片
        image_data = await ConvertFile2Image(reader.result, "mol");
      }
      let imageURL = 'data:image/png;base64,' + image_data.data.image_data;
      srcList.push({name: file.name, uid: file.uid, url: [imageURL]});
      resolve();
    };
  });
}
</script>
相关推荐
开心工作室_kaic1 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart3 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。3 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安4 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js