使用Vue怎么封装一个文件上传组件

这篇文章将为大家详细讲解有关使用Vue怎么封装一个文件上传组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

10年的常德网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整常德建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“常德网站设计”,“常德网站推广”以来，每个客户项目都认真落实执行。

pictureupload.vue:

<template>
  <div class="pictureupload">
    <el-upload
        :action="baseUrl + '/api/public/image'"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :on-exceed="handleExceed"
        :before-remove="beforeRemove"
        name="img"
        :on-success="upLoadSuccess"
        :data="upLoadData"
        :headers="headers"
        :limit="limit">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" >
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import store from "@/store";
export default {
  props: {
    imgList: {
      type: Array,
      default: []
    }, // 父组件传递的图片列表
    limit: "" // 图片数量限制
  },
  data() {
    return {
      fileList: [],
      upLoadData: {
        img: ""
      },
      baseUrl: process.env.BASE_API,
      dialogVisible: false,
      dialogImageUrl: "",
      headers: {
        Authorization: store.getters.token_type + " " + store.getters.token
      } // 接口调用token
    };
  },
  watch: {
    // 监听imgList的变化： fileList要求的格式为[{url: img}],所以监听imgList变化后将其进行处理，赋值给fileList
    imgList: {
      handler(newValue, oldValue) {
        if(newValue.length === 0) {
          this.fileList = [];
          return;
        }
        for (let i = 0; i < newValue.length; i++) {
          if (oldValue[i] != newValue[i]) {
            this.fileList = [];
            newValue.forEach(el => {
              this.fileList.push({url: el})
            })
            return;
          }
        }
      },
      deep: true
    }
  },
  methods: {
    // 图片移除时处理数据
    handleRemove(file, fileList) {
      let item = [];
      fileList.forEach(el => {
        item.push(el.url);
      });
      this.$emit("removeimg", item);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 判断图片数量
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {},
    // 上传图片成功事件
    upLoadSuccess(response) {
      this.$emit("uploadimg", response.message);
      this.$message("上传成功",);
    }
  },
  mounted() {
    if (this.imgList.length != 0) {
      this.imgList.forEach(el => {
        this.fileList.push({ url: el });
      });
    }
  }
};
</script>

使用上传图片组件：

<pictureupload @uploadimg="uploadimg" :imgList="ruleForm.img" :limit="3" @removeimg="removeimg"></pictureupload>

removeimg(item) {
  this.ruleForm.img = item;
},
uploadimg(item) {
  this.ruleForm.img.push(item);
},

关于使用Vue怎么封装一个文件上传组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

网站题目：使用Vue怎么封装一个文件上传组件
本文地址：https://www.cdcxhl.com/article24/jhcice.html

成都网站建设公司_创新互联，为您提供服务器托管、品牌网站制作、App设计、域名注册、虚拟主机、搜索引擎优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联