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>
相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦5 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互