前言
图片上传的功能相信大家再熟悉不过了，实现的方式也有很多，今天教大家在 vue 中用 vant 组件库实现这个简单的操作。
用到的属性和方法
属性
| 参数 | 描述 | 类型 |
|---|---|---|
| before-read | 文件读取前的回调函数，返回 false 可终止文件读取，支持返回 Promise | Function |
| v-model | 已上传的文件列表 | FileListItem[] |
| after-read | 文件读取完成后的回调函数 | Function |
| max-count | 文件上传数量限制 | number/string |
| max-size | 文件大小限制，单位为 byte | number/string/(file: File) => boolean |
方法
| 事件名 | 描述 |
|---|---|
| oversize | 文件大小超过限制时触发 |
| delete | 删除文件预览时触发 |
实现思路
其实 vant 已经将上传组件完善的很全面了，我们只需要去调用它的事件或者使用它的属性，将基础的上传组件做改动适配自己的需求就可以了；实现思路核心在于上传图片时创建一个空对象实例，然后再调用 append() 方法添加数据，最后请求接口，将处理好的参数(流)传递给后台即可。
完整代码
<template>
<div>
<!--// 上传组件 //-->
<van-uploader @oversize="onOversize" @delete="deleteClzp" :before-read="beforeRead" :after-read="clzpAfterRead" v-model="fileList"
:max-count="1" :max-size="5 * 1024 * 1024" />
</div>
</template>
<script>
import { uploadFiles, deleteFiles } from "../../api/enforcement"; //引入上传、删除接口
export default {
data() {
return {
fileList: [], //上传的文件列表
clzpfilePath: "", //删除所需参数
};
},
methods: {
//校验上传图片大小
onOversize(file) {
console.log(file);
this.$toast("文件大小不能超过5MB");
},
//校验图片的格式
beforeRead(file) {
if (!/(jpg|jpeg|png|JPG|PNG)/i.test(file.type)) {
this.$toast("请上传正确格式的图片");
return false;
}
return true;
},
//照片上传事件方法
clzpAfterRead(file) {
// 上传状态提示开启
file.status = "uploading";
file.message = "上传中...";
// 创建一个空对象实例
let formData = new FormData();
// 调用append()方法添加数据
formData.append("file", file.file);
uploadFiles(formData).then((res) => {
if (res.code == "10000") {
// 上传状态提示关闭
file.status = "done";
this.$toast("上传成功！");
this.clzpfilePath = res.data.relativePath; //删除所需参数
}
});
},
//照片删除事件方法
deleteClzp() {
// filePath：删除所需的参数
deleteFiles({ filePath: this.clzpfilePath }).then((res) => {
if (res.code == "10000") {
this.$toast("删除成功！");
}
});
},
},
};
</script>
实现效果图
– 拓展延伸
使用 vant 上传组件，编辑页面回显图片
// isImage 属性可判断是否是图片
this.fileList= [{ url: '图片地址', isImage: true }]
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79361.html
