关于前端:前端开发Vue项目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”，欢送关注！