写点什么

前端开发:Vant 组件—Uploader 文件上传的方法(图片上传)

用户头像
三掌柜
关注
发布于: 2021 年 03 月 13 日
前端开发:Vant组件—Uploader文件上传的方法(图片上传)

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

1、引入

首先要在项目中引入这个 Uploader 组件,打开项目工程,找到 main.js 文件,然后复制以下代码粘贴进去即可:


import Vue from 'vue';
import { Uploader } from 'vant';
Vue.use(Uploader);
复制代码


2、使用的具体文件写法

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

<template>
  <div class="file-uploader">
    <div class="credential-infor">
      <van-uploader 
        :after-read="afterRead"
        class="img-uploader"
        :max-count="1"    //这里是限制上传图片的张数,最低上传一张
        v-model="fileList"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "FileUploader",
  data() {
    return {
      fileList: [],
      imgKey:[]
    };
  },
  created() {},
  computed: {},
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      let imgFile = new FormData();
      imgFile.append("fileType", 'IMAGE');
      imgFile.append("file", this.fileList[0].file);
      this.$service.apply
        .uploadImage({
          data: imgFile,
        })
        .then((r) => {
          if (r.data.success) {
            this.imgKey.push(r.data.data.key) 
          }
        });
    }
  },
};
</script>
<style lang="scss">
.file-uploader {
  .credential-infor {
    margin: px2em(20);
    height: px2em(100);
  }
}
</style>
复制代码



针对上述代码大概解释一下使用过程,具体如下所示:

首先在 HTML 里面引入上传图片的组件:

<van-uploader :after-read="afterRead" />
复制代码


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

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

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

   在组件上面绑定图片的数据源,如下所示:

<van-uploader    :after-read="afterRead"   v-model="fileList"   //绑定数组格式   multiple  />
复制代码


      通过 v-model 来绑定已经上传的图片的列表,并展示图片列表的预览图。


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

三掌柜的微信公众号:


三掌柜的新浪微博:


发布于: 2021 年 03 月 13 日阅读数: 17
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (3 条评论)

发布
用户头像
加油,伙计
2021 年 03 月 13 日 16:10
回复
😁
2021 年 03 月 14 日 19:12
回复
用户头像
3月日更打卡第六天
2021 年 03 月 13 日 15:13
回复
没有更多了
前端开发:Vant组件—Uploader文件上传的方法(图片上传)