vue项目 阿里云多文件上传实战

简介：如图  这个是最做好的样式图 ，  支持文件件上传，大文件上传   可多个上传，可拖拽上传，下面详细讲解代码： 

1，如图  第一步选择文件/选择文件件拿到对应的参数file，拿到后做一些处理数据的操作  如 maxSize限制文件的大小上传。

2，拿到file值后   点击开始上传   注意：这块核心代码    这个方法upload将拿file的参数上传到接口

const pendingFiles = computed(() =>

    files.filter((f) => f.status === 'pending')

  );



  const upload = () => {

    console.log(pendingFiles.value, 'pendingFiles.value');

    pendingFiles.value.forEach((f) => {

      console.log(f, 'ffff', f.abort);

      f.status = 'uploading';

      f.abort = uploadFile(

        f.file,

        (p) => {

          f.progress = p;

        },

        (resp) => {

          f.status = 'uploaded';

          f.resp = resp;

        }

      );

    });

  };

3，该接口需要使用 new XMLHttpRequest()的方式去请求才能拿到 文件的上传进度  文件的总大小     拿到后进可以进行计算百分比如图

4，接口根据自己的需求传参

5，完整代码可关注我领取 谢谢！