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

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

 代码封装 

交易盈利证明
上传文件
或拖拽放入
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组件的二次封装实例,可以根据项目需求进行适当修改。

你可能感兴趣的:(JavaScript,Vue,vue.js,前端,javascript)