Vant Uploader上传文件 + 提交按钮上传（前后端）

原创

已于 2022-06-01 11:33:38 修改 · 1.2w 阅读

标签

#vant #前端 #vue

于 2022-05-30 13:29:53 首次发布

因公司项目需用安卓版PDA报修设备故障，使用Vant的Uploader组件。博主刚接触Vant，网上资料零散且缺后端承接参数方法，故做代码总结。展示了选择照片、提交表单和照片的代码效果，包含template、script及后台接收代码。

一、需求及前言

公司项目需要，使用安卓版PDA对设备故障进行报修。①在提交表单的时候需要同时提交故障照片，②图片单选。

上传组件使用了 Vant v2.12.47 中的 Uploader 组件，但是官方文档只是对单个组件的前端说明。最近才开始用 Vant，不太熟悉，在网上找了些使用方法，感觉零零碎碎的，而且不知道后端代码如何承接参数，也借鉴了一些，在此做一下使用方面的代码总结。

二、代码效果

其实很简单，就是选择照片->点击按钮提交表单和照片。
在这里插入图片描述

二、代码

1. template

<van-form @submit="onSubmit">
	<!-- ...中间表单的省略了... -->
	<van-field
        label="故障照片">
        <template #input>
        	<!-- 考虑到除了新增，修改时也要用到这个页面，且只有单张照片，而且数据库里直接存的路径，在这里可以展示一下已经上传的图片，也可以做点击预览 -->
            <van-image 
                :src="reportForm.reportPic" 
                fit="contain" v-if="reportForm.reportPic != ''"/>
            <!-- 图片选择，上传前判断格式，删除前做数据处理 -->
            <van-uploader 
                v-model="reportPic" 
                :after-read="afterRead" 
                :before-delete="beforeDelete"
                :max-count="1" />
        </template>
    </van-field>
    <div style="margin: 10px">
        <van-button block type="info" native-type="submit">提交</van-button>
    </div>
</van-</