1. 首页
  2. 文章中心
  3. Vue

vue3语法封装element中的upload上传组件vue3语法vue2语法-组件结语

66 阅读 0 评论
我是靠谱客的博主 凶狠镜子，最近开发中收集的这篇文章主要介绍vue3语法封装element中的upload上传组件vue3语法vue2语法-组件结语，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

vue3语法

1.1 upload组件

<template>
  <div class="upload-container">
    <el-upload
      ref="uploadRef"
      :name="fileName"
      :limit="limit"
      :accept="accept"
      :multiple="true"
      :file-list="defaultFileList"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      class="editor-slide-upload"
      :action="action"
    >
      <el-button size="small" type="primary"> 点击上传 </el-button>
      <template #tip>
        <div class="el-upload__tip">{{ tips }}</div>
      </template>
    </el-upload>
  </div>
</template>

<script>
import { reactive, defineComponent, toRefs, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'Upload',
  props: {
    tips: {
      type: String,
      default: '',
    },
    action: {
      type: String,
      default: '',
    },
    limit: {
      type: Number,
      default: 5,
    },
    accept: {
      type: String,
      default: '',
    },
    fileName: {
      type: String,
      default: 'file',
    },
    fileList: {
      type: Array,
      default: [],
    },
  },
  emits: ['success-callback', 'remove-callback', 'change-callback'],
  setup(_, ctx) {
    const uploadRef = ref()
    let UploadObject = {}
    const dataMap = reactive({
      defaultFileList: _.fileList,
      dialogVisible: false,
      checkAllSuccess: () => {
        return Object.keys(UploadObject).every(
          (item) => UploadObject[item].hasSuccess
        )
      },
      handleSuccess: (response, file) => {
        const uid = file.uid
        const objKeyArr = Object.keys(UploadObject)
        if (response.retCode !== 0)
          return ElMessage.error(response.retMsg || '请求失败,请重新上传文件!')
        for (let i = 0, len = objKeyArr.length; i < len; i++) {
          if (UploadObject[objKeyArr[i]].uid === uid) {
            UploadObject[objKeyArr[i]].url = response.data.url //附件
            UploadObject[objKeyArr[i]].hasSuccess = true
            // return
          }
        }
        setTimeout(() => {
          ctx.emit('success-callback', UploadObject)
        }, 0)
      },
      handleRemove: (file) => {
        const url = file.url
        const objKeyArr = Object.keys(UploadObject)
        for (let i = 0, len = objKeyArr.length; i < len; i++) {
          if (UploadObject[objKeyArr[i]].url === url) {
            delete UploadObject[objKeyArr[i]]
            break
          }
        }
        ctx.emit('remove-callback', UploadObject)
      },
      beforeUpload: async (file) => {
        if (file.size > 1048576) {
          ElMessage.error('单个文件不能超过1mb')
          throw new Error('单个文件不能超过1mb')
        }
        const fileName = file.uid
        let a = document.createElement('a')
        a.href = window.URL.createObjectURL(file)
        UploadObject[fileName] = {
          hasSuccess: false,
          uid: file.uid,
          name: file.name,
        }
      },
      handleSubmit() {
        const arr = Object.keys(UploadObject).map((v) => UploadObject[v])
        if (!dataMap.checkAllSuccess()) {
          ElMessage.warning(
            '请等待所有文件上传成功。如果文件上传失败，请手动删除错误文件后，重新上传!'
          )
          return
        }
        ctx.emit('success-callback', arr)
        dataMap.clearAll()
      },
      // 选择文件
      handleExceed(files, fileList) {
        ElMessage.warning(
          `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        )
      },
      clearAll() {
        console.log(uploadRef)
        UploadObject = {}
        dataMap.defaultFileList = []
        dataMap.dialogVisible = false
        uploadRef.value.clearFiles()
      },
      // 赋值
      setFileList() {
        if (dataMap.defaultFileList.length == 0) return false
        dataMap.defaultFileList.forEach((item, index) => {
          item.uid = index
          UploadObject[index] = item
        })
      },
      handleChange(file, fileList) {
        ctx.emit('change-callback', fileList)
      },
    })

    onMounted(() => {
      dataMap.setFileList()
      console.log(UploadObject, 'UploadObjec2222')
    })
    return { ...toRefs(dataMap), UploadObject, uploadRef }
  },
})
</script>

1.2 页面调用

<template>
  <Upload
  	ref="upload"
    :tips="'支持文件格式：.rar .zip .doc .docx .pdf ，单个文件不能超过1mb'"
    :action="'/file-admin/file/uploadViolation'"
    :fileName="'file'"
    :fileList="attachmentList"
    @success-callback="fileChange"
    @remove-callback="fileChange"
  />
   <button @click="clearFileList">清空已经上传过的文件</button>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs ,ref} from "vue";
export default defineComponent({
  setup(props, context) {
  	const uploadRef = ref()
    const dataMap = reactive({
      attachmentList : [],
      // 上传附件成功
      fileChange: (UploadObject) => {
        const fileList = Object.values(UploadObject);
        dataMap.attachmentList = fileList;
      },
     clearFileList() {
      uploadRef.value.clearAll();
     },
    });
    return {
      ...toRefs(dataMap),
      uploadRef
    };
  },
});
</script>
  • action：上传地址，可以使用代理或http链接；
  • fileChange：父组件上传文件成功或移除文件后改变的函数；

vue2语法-组件

<template>
  <div class="upload-container">
    <el-upload
      ref="upload"
      :name="fileName"
      :limit="limit"
      :accept="accept"
      :multiple="true"
      :with-credentials="true"
      :file-list="defaultFileList"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :on-exceed="handleExceed"
      class="editor-slide-upload"
      :action="action"
    >
      <el-button type="primary" plain icon="el-icon-upload">
        {{ buttonText }}
      </el-button>
      <template #tip>
        <div class="el-upload__tip">{{ tips }}</div>
      </template>
    </el-upload>
  </div>
</template>

<script>
let UploadObject = {};
export default {
  name: "Upload",
  props: {
    buttonText: {
      type: String,
      default: "点击上传"
    },
    tips: {
      type: String,
      default: ""
    },
    action: {
      type: String,
      default: ""
    },
    limit: {
      type: Number,
      default: 5
    },
    accept: {
      type: String,
      default: ""
    },
    fileName: {
      type: String,
      default: "file"
    },
    fileList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      defaultFileList: []
    };
  },
  mounted() {
    this.defaultFileList = this.fileList;
    this.setFileList();
  },
  methods: {
    handleSuccess(response, file) {
      const uid = file.uid;
      const objKeyArr = Object.keys(UploadObject);
      if (!response.flag)
        return this.$message.error(
          response.retMsg || "请求失败,请重新上传文件!"
        );
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (UploadObject[objKeyArr[i]].uid === uid) {
          UploadObject[objKeyArr[i]].url = response.datas.url; //附件
          UploadObject[objKeyArr[i]].hasSuccess = true;
          // return
        }
      }
      setTimeout(() => {
        this.$emit("success-callback", UploadObject);
      }, 0);
    },

    handleRemove(file) {
      const url = file.url;
      const objKeyArr = Object.keys(UploadObject);
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (UploadObject[objKeyArr[i]].url === url) {
          delete UploadObject[objKeyArr[i]];
          break;
        }
      }
      this.$emit("remove-callback", UploadObject);
    },
    async beforeUpload(file) {
      if (file.size > 1048576) {
        this.$message.error('单个文件不能超过1mb');
        throw new Error('单个文件不能超过1mb');
      }
      const fileName = file.uid;
      let a = document.createElement("a");
      a.href = window.URL.createObjectURL(file);
      UploadObject[fileName] = {
        hasSuccess: false,
        uid: file.uid,
        name: file.name
      };
    },
    handleSubmit() {
      const arr = Object.keys(UploadObject).map(v => UploadObject[v]);
      if (!this.checkAllSuccess()) {
        this.$message.warning( '请等待所有文件上传成功。如果文件上传失败，请手动删除错误文件后，重新上传!');
        return;
      }
      this.$emit("success-callback", arr);
      this.clearAll();
    },
    // 选择文件
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`);
    },
    clearAll() {
      UploadObject = {};
      this.defaultFileList = [];
      this.$refs.upload.clearFiles();
    },
    // 赋值
    setFileList() {
      if (this.defaultFileList.length == 0) return false;
      this.defaultFileList.forEach((item, index) => {
        item.uid = index;
        UploadObject[index] = item;
      });
    },
    checkAllSuccess() {
      return Object.keys(UploadObject).every(
        item => UploadObject[item].hasSuccess
      );
    }
  }
};
</script>
<style lang="scss">
.editor-slide-upload .el-upload {
  text-align: left;
}
</style>

1.2 调用

<template>
  <div class="upload">
    <Upload
      ref="upload"
      :tips="'支持文件格式：.rar .zip .doc .docx .pdf ，单个文件不能超过1mb'"
      :action="uploadAction"
      :fileList="uploadFileBeans"
      @success-callback="fileChange"
      @remove-callback="fileChange"
    />
    <button @click="clearFileList">清空已经上传过的文件</button>
  </div>
</template>

<script>
export default {
  name: "vue2Demo",
  data() {
    return {
      uploadAction: "/file-admin/file/uploadViolation",
      uploadFileBeans: [],
    };
  },
  methods: {
    // 上传成功
    fileChange(UploadObject) {
      const fileList = Object.values(UploadObject);
      this.uploadFileBeans = fileList;
    },
    // 清空已经上传过的文件
    clearFileList() {
      this.$refs.upload.clearAll();
    },
  },
};
</script>

结语

over~
如果本文对你有帮助的话，请不要忘记给我点赞评论打call哦~o(￣▽￣)ｄo

其他文件：
vue项目中实现前台导出和后台导出Excel或其他类型文件的方法合集

最后

以上就是凶狠镜子为你收集整理的vue3语法封装element中的upload上传组件vue3语法vue2语法-组件结语的全部内容，希望文章能够帮你解决vue3语法封装element中的upload上传组件vue3语法vue2语法-组件结语所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(44)

相关文章

java中处理http连接超时
java中处理http连接超时
java原生任务超时处理
java原生任务超时处理
vue+element封装公共上传图片组件
vue+element封装公共上传图片组件
vue.js打包上传php,Vue封装一个简单轻量的上传文件组件的示例
vue.js打包上传php,Vue封装一个简单轻量的上传文件组件的示例
vue3语法封装element中的upload上传组件vue3语法vue2语法-组件结语
vue3语法封装element中的upload上传组件vue3语法vue2语法-组件结语
【个人笔记】解决van-uploader只能上传图片的问题
【个人笔记】解决van-uploader只能上传图片的问题
vue封装文件上传方法
vue封装文件上传方法
新手Layui上传图片写法
新手Layui上传图片写法

评论列表共有 0 条评论

立即
投稿
返回
顶部