vue3 ant-design-vue 封装上传图片组件

        嗨，我是小路。今天主要和大家分享的主题是“vue3 封装上传图片组件”。是平常使用的一些项目，主要是在ant-design-vue框架下进行封装的上传图片组件。

一、主要属性

1.beforeUpload

定义：上传文件之前的钩子函数，当文件从本地上传选中之后，文件上传之前，会通过这个函数进行一系列的操作。如判断字符串的大小，文件类型，返回true则继续上传操作，返回false，则停止上传

const beforeUpload = (file) => {
    //判断文件的大小，这里是kb，file.size/1024 = xM(M兆为单位)，xM /1024 = yG(G为单位)
  let size = file.size / 1024 / 1024

  if (size > 1024) {

    message.error('上传文件太大', 1.5,)
    return false
  }
  let ext = file.name.split(".").pop()
  if (!(ext == "jpg" || ext == "png")) {
    message.error("只能上传jpg、png等图片格式文件")
  } else {
    
  }
  return false;
}

2.customRequest

定义：自定义上传钩子函数，在执行完成beforeUpload返回true之后，继续执行customRequest指向的函数，如果beforeUpload返回false，则不执行customRequest的钩子。

3.fileList

定义：已经上传的文件列表,可执行设置。它是一个数组。多个文件以对象的形式存储。

4.onUploadProgress

定义：axios的进度条参数，可以在函数使用时，自定义进度条；可以监控整个文件上传的进度过程。直接返回百分比，值在0-1之间。

let formData = new FormData();
const uploadFile = ref([])
//上传的文件
formData.append("file", file.originFileObj);

//post上传
Http.post('/xxx/xxx/Upload', formData, {
      onUploadProgress: e => {

        if (e.upload) {
           //监控文件的上传进度
          uploadFile.value[i]['percent'] = e.progress.toFixed(2) * 100
        }
      }
    }).then(data => {
      if (data.Success) {
        //返回上传的值 data，可以将data中的数据返回给指定的字段
      } else {
        message.error(`${data.Message}`)
      }
    })

二、实例代码

1、上传图片

        一、组件在上传图片到服务器之前，先上传到列表，并判断文件是否满足制定条件。

        二、点击开始上传按钮，图片开始上传图片，并将状态返回给列表。

        三、点击确定，返回已经上传的组件。

const beforeUpload = (file) => {
  let size = file.size / 1024 / 1024

  if (size > 1024) {

    message.error('上传文件太大', 1.5,)
    return false
  }
  let ext = file.name.split(".").pop()
  if (!(ext == "mp4" ) {
    message.error("只能上传mp4、格式文件")
  } else {
    
  }
  return false;
}



const customRequest = () => {
  
  for (let i = 0; i < uploadFile.value.length; i++) {
    uploading.value = true
//判断文件是否上传过，上传过了就不再上传
    let file = uploadFile.value[i]
    if (uploadArr.value.indexOf(file.uid) == -1) {
      continue;
    }
    let formData = new FormData();

    if (file.percent > 0) {

      continue;
    }

    formData.append("file", file.originFileObj);

    http.post('/xxx/xxx/Upload', formData, {
      onUploadProgress: e => {

        if (e.upload) {
          uploadFile.value[i]['percent'] = e.progress.toFixed(2) * 100
        }
      }
    }).then(data => {
      if (data.Success) {
       
      } else {
        message.error(`${data.Message}`)
      }
    })

  }

}

        至于上传列表页面的展示效果，可以通过progress进行显示。

都看到这里了，记得【点赞】+【关注】哟。