vue使用html fileupload,前端开发：Vue项目Uploader文件上传的方法（图片上传）

前段时间在开发项目的时候，有一个业务需求是上传图片，之前做移动端开发的时候上传图片也是非常基本的需求，但是对于前端开发来说需要研究一下怎么实现的。我们的项目用的是Vant组件，然后我就直接去Vant的组件官网查看上传文件的使用方法，然后直接看着官网API教程使用即可，如果有什么疑问还可以问度娘、问朋友。

废话不多说，接下来就来分享一下具体的上传图片方法，具体步骤如下所示：

1、引入

首先要在项目中引入这个Uploader组件，打开项目工程，找到main.js文件，然后复制以下代码粘贴进去即可：import Vue from 'vue';

import { Uploader } from 'vant';

Vue.use(Uploader);

2、使用的具体文件写法

我的实例里面直接把上传图片那个模块用一个组件来封装起来，这样方便调用和管理，具体组件文件写法如下所示：`

:after-read="afterRead"

class="img-uploader"

:max-count="1" //这里是限制上传图片的张数，最低上传一张

v-model="fileList"

/>

export default {

name: "FileUploader