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

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

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