扣丁学堂HTML5培训之Vue开发之封装上传文件组件与用法示例

今天扣丁学堂HTML5培训老师给大家分享一篇关于Vue开发之封装上传文件组件与用法，结合实例形式分析了vue.js使用elementui的el-upload插件进行上传文件组件的封装及使用相关操作技巧。下面我们一起来看一下吧。

使用elementui的el-upload插件实现图片上传组件，每个项目存在一定的特殊性，所以数据的处理会不同。

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" alt="">
 </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);
},

以上就是关于扣丁学堂HTML5培训之Vue开发之封装上传文件组件与用法示例的详细介绍，希望对大家有所帮助，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。