一些关于vant-uploader的前端问题

最新推荐文章于 2024-09-24 17:30:03 发布

风刚刚好

最新推荐文章于 2024-09-24 17:30:03 发布

阅读量4.8k

点赞数 1

本文链接：https://blog.csdn.net/gncat111/article/details/110220202

版权

本文介绍了在前端开发中使用 vant-uploader 遇到的问题及其解决方案，包括afterRead与beforeRead的执行顺序、实时上传与删除文件的实现，以及样式修改的方法。针对beforeRead事件，需返回True才能执行afterRead。对于实时向服务器提交和删除文件，通过动态添加id实现了 vant-uploader 控件与服务器同步操作。

摘要由CSDN通过智能技术生成

首先要引入vant和vue，参考官方地址。vant-uploader的定义，实现和引入详见官方地址，这里不再一一列举。

本文写一些前端开发方面遇到的问题。
1.afterRead和beforeRead有时不能同时执行的问题。
解决方案:beforeRead要执行返回True之后才可以执行afterRead 。

<van-uploader :before-read="beforeRead" ：after-read="afterRead" />

export default {
  methods: {
    beforeRead(file) {
      if (file.type !== 'image/jpeg') {
        Toast('请上传 jpg 格式图片');
        return false;
        			}
      return true;
      		},
   afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      		},
      	},
};

van-uploader允许上传的文件类型默认为image/*，一般直接写afterRead就可以了。

2.实现实时向服务器提交，删除文件。
项目需求是上传和删除与服务器同步，删除图片的同时需要从服务器端也删除图片。
由于vant-uploader本质也是image+input实现的。<