前段时间在开发项目的时候，有一个业务需求是上传图片，之前做移动端开发的时候上传图片也是非常基本的需求，但是对于前端开发来说需要研究一下怎么实现的。我们的项目用的是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",
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)
}
});
}
},
};
.file-uploader {
.credential-infor {
margin: px2em(20);
height: px2em(100);
}
}
`
针对上述代码大概解释一下使用过程，具体如下所示
首先在HTML里面引入上传图片的组件：
然后在js里面进行如下操作：export default {
methods: {
afterRead(file) {
// 此时可以自行将文件上传至服务器，这里就是要写调用后台上传图片的接口位置
console.log(file);
},
},
};
其实还可以加一个上传图片之后的预览效果，上述代码没有写，但是我在下面添加一下，具体操作如下：
在组件上面绑定图片的数据源，如下所示：
:after-read="afterRead"
v-model="fileList" //绑定数组格式
multiple />
通过v-model来绑定已经上传的图片的列表，并展示图片列表的预览图。
以上就是本章全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！