vue3 项目上传图片的时候 :on-progress="onProgress" 怎么设置上传的速度 大的图片时间长 小的图片时间短 代码怎么写

在Vue 3项目中，你可以通过监听`progress`事件来获取上传进度并根据上传文件大小来调整上传速度。下面是一个示例代码：

<template>
  <div>
    <input type="file" @change="uploadFile" />
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = (e) => {
        const dataURL = e.target.result;
        const formData = new FormData();
        formData.append('file', file);

        // 模拟上传进度
        const chunkSize = 1024 * 1024; // 每次上传的字节数
        const totalChunks = Math.ceil(file.size / chunkSize); // 总共的分片数量
        let currentChunk = 0; // 当前上传的分片索引

        const uploadNextChunk = () => {
          const start = currentChunk * chunkSize;
          const end = Math.min(start + chunkSize, file.size);
          const chunk = file.slice(start, end);

          // 模拟上传
          setTimeout(() => {
            // 处理上传进度
            const progress = Math.ceil(((currentChunk + 1) / totalChunks) * 100);
            this.onProgress(progress);

            // 判断是否还有分片需要上传
            if (currentChunk < totalChunks - 1) {
              currentChunk++;
              uploadNextChunk();
            } else {
              // 上传完成
              this.onProgress(100);
            }
          }, 1000); // 模拟上传延迟，可以根据实际情况调整
        };

        // 开始上传
        uploadNextChunk();
      };

      reader.readAsDataURL(file);
    },
    onProgress(progress) {
      // 处理上传进度
      console.log(`当前上传进度：${progress}%`);
    },
  },
};
</script>

在上述代码中，我们使用`FileReader`来读取文件内容，并使用`FormData`来构建需要上传的数据。然后，我们模拟分片上传的过程，每次上传一个分片并计算上传进度，通过调用`this.onProgress(progress)`方法来更新上传进度。

你可以根据实际需要修改代码，比如调整分片大小、上传延迟等。

希望这个回答能够帮到你！如果还有其他问题，请随时提问。