vue基于vant实现图片上传

前言

图片上传的功能相信大家再熟悉不过了，实现的方式也有很多，今天教大家在 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 }]

vue基于vant实现图片上传相关推荐

element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
使用vue+elementUi+springBoot实现图片上传，图片删除，图片展示
使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示环境配置准备环境使用软件图片上传图片删除图片显示所有代码均为参考,每个人的方法不一样,效果不一样,该代 ...
自定义vue组件--实现多图片上传
一引入文件上传在日常的开发中是一项基本的操作,在前端中得以广泛的使用,因此将其封装成一个组件显得极为重要,本文主要是基于vue实现的自定义多图片上传组件. 二自定义vue上传组件 MultiUp ...
elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
基于android的图片上传分享系统相册app
该图片上传分享系统是一款基于安卓的双端程序,客户端采用eclipse作为开发平台,服务端采用了myeclipse作为开发平台,数据库是mysql,主要实现了图片的编辑和上传的功能,界面美观大气,功能技 ...
vue上传图片文件到服务器,vue如何将quill图片上传到服务器
通过自定义quill图片上传按钮,实现将图片上传服务器,并插入服务器地址. export default { name: "editor", props: ['content'], ...
vue标签旋转_基于vue下input实现图片上传，压缩，拼接以及旋转的代码详解
本篇文章给大家带来的内容是关于php队列的实现代码介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是 ...

vue基于vant实现图片上传

前言

用到的属性和方法

实现思路

完整代码

实现效果图

拓展延伸

vue基于vant实现图片上传相关推荐

最新文章

热门文章