前端开发:Vue项目Uploader文件上传的方法(图片上传)

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

废话不多说,接下来就来分享一下具体的上传图片方法,具体步骤如下所示:
1、引入
首先要在项目中引入这个Uploader组件,打开项目工程,找到main.js文件,然后复制以下代码粘贴进去即可:

import Vue from 'vue';
import { Uploader } from 'vant';
Vue.use(Uploader);

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

`




`

前端开发:Vue项目Uploader文件上传的方法(图片上传)_第1张图片
针对上述代码大概解释一下使用过程,具体如下所示
首先在HTML里面引入上传图片的组件:


然后在js里面进行如下操作:

export default {
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器,这里就是要写调用后台上传图片的接口位置
      console.log(file);
    },
  },
};

其实还可以加一个上传图片之后的预览效果,上述代码没有写,但是我在下面添加一下,具体操作如下:
在组件上面绑定图片的数据源,如下所示:


通过v-model来绑定已经上传的图片的列表,并展示图片列表的预览图。
前端开发:Vue项目Uploader文件上传的方法(图片上传)_第2张图片

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

你可能感兴趣的:(前端vue.js)