前段时间在开发我的项目的时候,有一个业务需要是上传图片,之前做挪动端开发的时候上传图片也是十分根本的需要,然而对于前端开发来说须要钻研一下怎么实现的。咱们的我的项目用的是 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”,欢送关注!