van-uploader参考文档
- 限制上传数量
通过 max-count 属性可以限制上传文件的数量,上传数量达到限制后,会自动隐藏上传区域。 - 限制上传大小
通过 max-size 属性可以限制上传文件的大小,超过大小的文件会被自动过滤,文件信息通过 oversize 事件获取。 - 文件上传前进行校验和处理 通过before-read 传入函数,可以在上传前进行校验和处理,支持返回 Promise 对 file 对象进行自定义处理。例如压缩图片:使用compressorjs压缩图片,优化功能,压缩所有格式的图片。
- 文件上传完毕后获取数据 文件上传后会触发 after-read 回调函数,获取到对应的 file 对象。
- 更多细节请参考vant官方文档
<template>
<div>
<van-uploader
v-model="fileList"
:max-count="1"
:max-size="2048 * 1024"
:after-read="OnAfterRead"
:before-read="onBeforeRead"
@oversize="onOversize"
@delete="onDelete"
/>
</div>
</template>
<script>
import Compressor from "compressorjs";
export default {
data() {
return {
fileList: [],
IMG_LIST: "", //图片路径
};
},
methods: {
OnAfterRead(result) {
let newImage = new Image();
// 这里将src传入需要获取信息的图片地址或base64
newImage.src = result.content;
newImage.onload = () => {
// 输出图片信息 比如可以获取图片宽高
console.log("图片宽", newImage.width);
console.log("图片高", newImage.height);
this.fileList[0].url = result.content;
// 点击上传图片的结果(base64的图片字符串)IMG_LIST
this.IMG_LIST = this.fileList[0].url;
// 控制台打印
console.log(" this.IMG_LIST ", this.IMG_LIST);
};
},
//上传图片压缩,需要安装依赖: npm i compressorjs,并引入(import) 图片0.6倍压缩
onBeforeRead(file) {
return new Promise((resolve) => {
new Compressor(file, {
quality: 0.6,
success: resolve,
error(err) {
console.log('图片压缩失败---->>>>>',err.message);
},
});
});
},
//图片大小超过2M提示
onOversize(file) {
this.$toast("图片大小不能超过 2M");
},
//点击移除图片
onDelete() {
this.fileList = [];
},
},
};
</script>
<style>
</style>
文章来源地址https://www.toymoban.com/news/detail-578273.html
文章来源:https://www.toymoban.com/news/detail-578273.html
到了这里,关于Vant Uploader 上传图片功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!