Vue中mixin高级用法举例实现对el-upload钩子的封装和极高的复用性

本文链接：https://blog.csdn.net/weixin_45670469/article/details/118761584

mixin高级用法,混入通用方法,自定义通用方法参数,实现对上传文件的大小,类型,图片尺寸进行上传拦截

el-upload 中的beforeUpload钩子方法,在对上传之前进行处理在很多上传的地方都会用到,可能因为上传文件不同,大小需要限制等等,还比如上传图片,需要对图片的尺寸进行校验等等,我们可以将这个方法通过混入的方式即实现了对通用方法通用性.降低耦合度

混入upload.js中的代码

//uploadl.js代码
/**
 1. @acceptlist {type:Array} 举例: ['mp3','mp4']  必填
 2. @acceptSize {type:Number} 文件大小(单位/m)	必填
 3. @acceptType {type:String}  是否需要校验图片 是传img 校验图片需要传
 4. @acceptFile {type:Object}  举例:{width:200,height:300} 校验图片需要传
 */
export default function (acceptArr, acceptSize, acceptType, acceptFile) {
   
  return {
   
    methods: {
   
      // 上传约束
      beforeUpload (file) {
   
        // 校验文件格式
        let fileName = file.name;
        let suffix_type = fileName.substring(fileName.lastIndexOf(".") + 1);
        if (acceptArr && Object.prototype.toString.call(acceptArr) == '[object Array]') {
   
          if (!acceptArr.includes(suffix_type)) {
   
            this.$message.error("请