Vue3中图片上传组件封装-element-plus的el-upload二次封装-案例

 代码封装 

  
交易盈利证明
  
    
    

      
上传文件
      
或拖拽放入
    
  
  

const uploadRef = ref(null);

const fileType = ref({
  limitSize: 2,
  type: 'png'
});

const beforeUpload = (file) => {
  console.log('beforeUpload', file);
  // 上传文件之前钩子
  const type = file.name.split('.')[file.name.split('.').length - 1];
  console.log(type, '文件格式！');

  if (file && file.size / 1024 / 1024 > fileType.value.limitSize) {
    ElMessage.error(`文件大小不能超过${fileType.value.limitSize}`);
    return false;
  }
  if (file && !fileType.value.type.indexOf(file.type) == -1) {
    ElMessage.error(`只能上传${fileType.value.type}类型的文件`);
    return false;
  }
};
const uploadBpmn = (param) => {
  console.log('uploadBpmn', param);
  // const formData = new FormData();
  // formData.append('file', param.file);
  // console.log(formData.get('file'), param, 888);
};

const handleChange = (response, file, fileList) => {
  console.log('handleChange', response, file, fileList);
  // getProfileAvatarUploadParam(response);
  // console.log(uploadRef.value, 99);
  uploadRef.value.clearFiles(); //清除文件对象
  // uploadRef.value.submit() //提交 .clearFiles()清除
};

const handError = (error, file, fileList) => {
  console.log('handError', error, file, fileList);
};

// 获取头像上传参数
const getProfileAvatarUploadParam = async (file) => {
  try {
    let params = {
      contentType: file.raw.type || 'image/png'
    };
    const {
      data: { data }
    } = await profileAvatarUploadParam(params);
    console.log('getProfileAvatarUploadParam', data);
    uploadImage(data, file);
  } catch (error) {
    console.log('getProfileAvatarUploadParam', error);
  }
};

const ImageProve = ref(null);

// 上传图片
const uploadImage = async (xhrData, file) => {
  console.log('uploadImage', xhrData, file);
  try {
    const formData = new FormData();
    for (const key in xhrData.param) {
      const value = xhrData.param[key];
      formData.append(key, value);
    }
    formData.append('file', file.raw);
    // console.log(xhrData.param, formData.get('file'), 9898);
    let config = {
      method: 'post',
      // maxBodyLength: Infinity,
      url: xhrData.uploadUrl,
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    };
    const res = await axios.request(config);
    ImageProve.value = xhrData.accessUrl;
    console.log('uploadImage', res);
  } catch (error) {
    console.log('uploadImage', error);
  }
};

---

在Vue3中，我们可以使用element-plus提供的el-upload组件进行图片上传。但是有时候我们需要根据具体业务需求对该组件进行二次封装，以适应项目中的具体场景。下面给出一个基于element-plus的el-upload组件的二次封装，实现图片上传和图片预览功能。

1. 安装element-plus

在Vue3项目中，我们可以使用npm或yarn来安装element-plus组件库。

// 使用npm安装element-plus
npm install element-plus --save

// 使用yarn安装element-plus
yarn add element-plus

2. 封装图片上传组件

在封装图片上传组件时，我们可以将el-upload组件进行二次封装，以方便在项目中的使用。具体封装代码如下：

在该封装组件中，我们定义了一些props属性，包括文件上传地址(actionUrl)、是否显示文件列表(showFileList)、是否支持多选(multiple)、最大上传文件个数(limit)、上传提示内容(tip)、文件列表(fileList)等。我们还定义了一些方法，包括文件数量超限(handleExceed)、文件上传成功(handleSuccess)、文件删除前(beforeRemove)、文件删除成功(handleRemove)、文件预览(handlePreview)等。在该封装组件中，我们使用了element-plus提供的el-upload组件，并在其基础上进行了二次封装。

3. 使用封装组件

在项目中使用我们封装好的图片上传组件非常简单，只需要在具体页面中引入该组件并传递相应的props属性即可。具体代码如下：

在上述代码中，我们在ImageUploadPage页面中引入了我们封装好的AvatarUploader组件，并传递了相应的props属性。在实际使用中，我们可以根据具体业务需求进行修改和调整。

---

Vue3中可以通过对element-plus的el-upload进行二次封装来实现图片上传组件的封装。下面是一份简单的示例：

1、安装element-plus：

npm install element-plus --save

2、创建一个Upload.vue组件，并引入element-plus和相关样式：

3、在父级组件中使用Upload.vue组件：

通过以上代码示例可以看出，在Upload.vue组件中，我们可以通过props来接收父组件传递的参数，比如上传地址（action）、上传时携带的参数（data）、上传的文件头信息（headers）等等。在父组件中，我们通过使用Upload.vue组件，并将需要上传的参数作为props传递给上传组件，同时也可以在Upload.vue组件中使用自定义事件来向父组件派发成功或错误的事件，比如上传成功事件（success）和上传错误事件（error）等等。在父组件中，我们可以通过设置listType属性来控制文件列表的显示方式，比如图片卡片显示方式（picture-card）或文件列表方式（text）等等。

---

 Vue3中图片上传组件的二次封装可以使用Element Plus中的el-upload组件。el-upload组件是一个通用的上传组件，支持多文件上传、拖拽上传、图片裁剪等功能。以下是一个基于Element Plus的el-upload组件的二次封装实例：

在img-upload组件中，我们用了Element Plus的el-upload组件，并且通过props来传递一些参数，包括上传路径（actionUrl）、请求头（headers）、上传数据（formData）、是否允许多个文件上传（multiple）、是否自动上传（autoUpload）和文件数量限制（limit）。在setup函数中，我们通过useRef来定义变量fileList、dialogVisible和imgUrl，并且定义handleChange和handleExceed两个方法，用于处理上传和文件数量超过限制的情况。在模板中，我们用el-dialog组件来显示上传的图片，并且为el-upload组件添加了一个提示消息。

这是一个简单的el-upload组件的二次封装实例，可以根据项目需求进行适当修改。