vue-apple-file-upload

vue-apple-file-upload

Apple 风格 Vue 2 文件上传组件，内置环形进度动画、文件列表、大小/数量校验。

安装

npm i vue-apple-file-upload

假设你的后端上传接口是 POST https://api.example.com/upload，接收 multipart/form-data，字段名 file。

方式一：全局注册（推荐）

① 在 main.js 注册并传入 axios 实例

// src/main.js
import Vue from "vue";
import axios from "axios";
import AppleFileUpload from "vue-apple-file-upload";

const http = axios.create({
  baseURL: "https://api.example.com",
  timeout: 120000,
});

Vue.use(AppleFileUpload, { http });

② 在任意页面使用

<template>
  <apple-file-upload
    upload-url="/upload"
    :simulate="false"
    @success="onSuccess"
    @error="onError"
  />
</template>

<script>
export default {
  methods: {
    onSuccess(file) {
      console.log("成功", file.name);
    },
    onError(err) {
      console.error("失败", err);
    },
  },
};
</script>

实际请求地址 = axios baseURL + upload-url = https://api.example.com/upload。

方式二：局部注册

① 在页面中引入组件并传入 axios 实例

<template>
  <apple-file-upload
    :http="myAxios"
    upload-url="/upload"
    :simulate="false"
    @success="onSuccess"
  />
</template>

<script>
import axios from "axios";
import { AppleFileUpload } from "vue-apple-file-upload";

export default {
  components: { AppleFileUpload },
  data() {
    return {
      myAxios: axios.create({ baseURL: "https://api.example.com" }),
    };
  },
  methods: {
    onSuccess(file) {
      console.log("成功", file.name);
    },
  },
};
</script>

Props

Events

请求格式

• 整文件上传：POST {uploadUrl}，FormData 字段 file
• 分片上传：POST {uploadUrl}，FormData 字段 file、filename、chunkNumber、totalChunks
• 进度：通过 axios onUploadProgress 拿到 loaded/total

License

MIT