纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vant Uploader上传一张或多张图片组件 Vant Uploader实现上传一张或多张图片组件

qq_25993655   2021-09-15 我要评论
想了解Vant Uploader实现上传一张或多张图片组件的相关内容吗,qq_25993655在本文为您仔细讲解Vant Uploader上传一张或多张图片组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vant,Uploader上传一张,Vant,Uploader上传多张图片组件,Vant,Uploader上传图片组件,下面大家一起来学习吧。

html部分

<template>
  <div class="contWrap">
    <van-uploader
      v-model="fileList"
      :multiple="true"
      :before-read="beforeRead"
      :after-read="afterRead"
      :before-delete="delUploadImg"
      upload-icon="plus"
    >
    <!-- 注:这里是自定义上传样式 -->
      <!-- <p>
        <van-icon
          name="plus"
          color="#07c160"
          size=".5rem"
        />
        上传照片
      </p> -->
    </van-uploader>
  </div>
</template>

js部分

<script>
import axios from "axios";
export default {
  name: "uploadImages",
  data() {
    return {
      fileList: [],
      uploadUrl: "/api/upload/fileUpload",
      headers: {
        token: this.$store.state.account.token,
      },
    };
  },

  methods: {
    // 返回布尔值
    beforeRead(file) {
      if (file instanceof Array) {
        //判断是否是数组
        file.forEach((v) => {
          this.checkFile(v);
        });
      } else {
        this.checkFile(file);
      }
      return true;
    },
    //图片类型检查
    checkFile(file) {
      const format = ["jpg", "png", "jpeg"];
      const index = file.name.lastIndexOf(".");
      const finalName = file.name.substr(index + 1);
      if (!format.includes(finalName.toLowerCase())) {
        Toast("请上传" + format.join(",") + "格式图片");
        return false;
      }
    },
    afterRead(file) {
    // 此时可以自行将文件上传至服务器
      if (file instanceof Array) {
        file.map((v) => {
          v.status = "uploading";
          v.message = "上传中...";
          this.uploadImg(v);
        });
      } else {
        file.status = "uploading";
        file.message = "上传中...";
        this.uploadImg(file);
      }
    },
    //上传
    uploadImg(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      axios
        .post(this.uploadUrl, formData, {
          headers: this.headers,
        })
        .then((res) => {
          if (res.data) {
            if (file instanceof Array) {
              //判断是否是数组
              file.map((v, i) => {
                v.status = "success";
                v.message = "";
                v.url = res.data[i];
              });
            } else {
              file.status = "success";
              file.message = "";
              file.url = res.data.uploadUrl;
            }
          }
        })
        .catch((err) => {
          this.$notify({
            type: "warning",
            message: "上传失败",
          });
        });
    },
    //删除
    delUploadImg(item) {
      this.fileList = this.fileList.filter((v) => v.url != item.url);
    }
  },
};
</script> 

相关文章

猜您喜欢

  • JavaScript 数组去重 JavaScript 数组去重详解

    想了解JavaScript 数组去重详解的相关内容吗,麒麟社在本文为您仔细讲解JavaScript 数组去重的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript,数组,JavaScript数组去重,下面大家一起来学习吧。..
  • C语言的常见关键字 C 语言基础之C语言的常见关键字

    想了解C 语言基础之C语言的常见关键字的相关内容吗,吞吞吐吐大魔王在本文为您仔细讲解C语言的常见关键字的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:C语言关键字,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.axommsoft.com 【Pdf软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式