vant ui 附件

### Vant UI 附件组件使用方法

#### 安装 Vant UI 库
为了能够正常使用 Vant 的任何组件，包括附件组件 (Uploader)，需要先按照官方指南完成库的安装。对于 Vue 2 和 Vue 3 不同版本有不同命令：

针对 Vue 2 项目：

npm i vant -S

而 Vue 3 则应执行：

npm i vant@next -S

[^1]

#### 导入 Uploader 组件
有两种方式可以导入此组件：整体引入或是按需加载。

- **整体引入**
如果选择这种方式，则只需在项目的入口文件中加入一行代码即可全局注册所有组件。

- **按需加载**
更推荐的做法是仅载入实际要用到的部分，这有助于减少打包后的体积。具体操作是在相应页面或模块里单独声明所需部件。

import { createApp } from 'vue';
import App from './App.vue';

// 按需引入 Uploader 组件及其样式
import { Uploader, Field } from 'vant';
import 'vant/lib/uploader/style'; // 加载 CSS 文件
import 'vant/lib/field/style'; 

const app = createApp(App);
app.use(Uploader).use(Field);

app.mount('#app');

#### 使用 Uploader 实现图片上传功能
下面给出一段简单的 HTML 结构配合 JavaScript 方法来展示如何运用 `Uploader` 来处理 base64 编码形式的照片数据。

HTML 部分展示了表单项内嵌套了一个用于选取并预览图像的小工具。

<!--个人图片上传-->
<van-field name="pic" label="个人图片" required>
  <template #input>
    <van-uploader v-model="headpic" max-count="1" accept="image/*" :before-read="beforeRead" :after-read="afterRead"/>
  </template>
</van-field>

JavaScript 方面定义了两个钩子函数分别用来做前置检查 (`beforeRead`) 及后续读取动作(`afterRead`) ，以及一个变量存储选中的头像信息 (`headpic`)。

data() {
  return {
    headpic: [] // 存储已选择的文件列表，默认为空数组表示未选择任何文件
  };
},
methods:{
  beforeRead(file){
    console.log('Before reading file:',file);
    // 此处可以根据业务逻辑决定是否允许继续读取该文件
    // 返回 true 表示同意，false 或者抛出异常则阻止默认行为
    return new Promise((resolve,reject)=>{
      const isValidType=file.type.startsWith('image/');
      if(isValidType){
        resolve();
      }else{
        reject(new Error('只支持上传图片'));
      }
    });
  },
  afterRead(file){
    console.log('After reading file:',file);
    // 当文件被成功读取之后会调用这个回调，
    // 参数是一个对象包含了原始 File 对象和其他元数据
    // 如果返回的是字符串那么会被认为是要设置给 img.src 属性的内容
    // 否则应该手动更新视图状态以反映最新的变化
    this.headpic=[...this.headpic,file];
    
    // 处理base64编码的数据...
  }
}

以上就是基于 Vant UI Framework 下实现简单版的图片上传控件的方式介绍[^4]。