上传图片组件(多图上传,添加,删除,预览)
时间:2021-07-21
本文章向大家介绍上传图片组件(多图上传,添加,删除,预览),主要包括上传图片组件(多图上传,添加,删除,预览)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近使用上传图片 发现没自己想用的 就自己封装了一个
<template> <div> <div class="image-wrapper"> <div class="img-wrapper"> <div class="item" v-for="(item, index) in imgList" :key="index"> <img :src="item" class="dis-image" /> <div class="modal"> <span class="enlargement" @click="enlargementImg(index)"> <i class="el-icon-search"></i> </span> <span class="delete" @click="deleteImg(index)"> <i class="el-icon-delete"></i> </span> </div> </div> <div class="item upload-icon" @click="preSelect" v-if="imgList.length < fileCount" > <span class="heng"></span> <span class="su"></span> </div> </div> <input type="file" class="inputer" ref="inputRef" @change="handleChange($event)" multiple="multiple" /> </div> <el-dialog :visible.sync="dialogVisible" :modal="false"> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </div> </template> <script> import request from "@/utils/request"; import { getToken } from "@/utils/auth"; export default { name: "imgUpload", props: { fileMaxSize: { //默认最大体积M type: Number, required: false, default: 10, }, fileCount: { //上传图片数量 type: Number, required: false, default: 1, }, fileType: { type: String, required: false, default: "image/png, image/jpeg, image/jpg", }, imgList: { type: Array, }, }, data() { return { dialogImageUrl: "", dialogVisible: false, }; }, created() {}, methods: { preSelect() { //点击上传图片之前 this.$refs.inputRef.click(); }, handleChange(e) { //点击上传图片事件 let BreakException = {}; let file = e.target.files; if (file.length + this.imgList.length > this.fileCount) { this.$message.error("最多上传" + this.fileCount + "张图片"); return; } try { file.forEach((element) => { console.log(element); if (!element.type || this.fileType.indexOf(element.type) === -1) { this.$message.error("图片类型错误"); throw BreakException; } else if (element.size > this.fileMaxSize * 1024 * 1000) { this.$message.error("图片太大请重新上传"); throw BreakException; } }); } catch (error) { if (e !== BreakException) throw e; } file.forEach((element) => { // //以base64的形式展示 let freader = new FileReader(); freader.readAsDataURL(element); freader.onload = (e) => { // this.imgList.push(e.target.result); }; let formData = new FormData(); formData.append("file", element); request({ url: process.env.VUE_APP_BASE_API + "/common/upload", method: "post", data: formData, header: { Authorization: "Bearer " + getToken() }, }).then((url) => { this.imgList.push(url.url); }); }); this.$refs.inputRef.value = ""; }, deleteImg(ind) { // 删除图片 this.imgList.splice(ind, 1); }, enlargementImg(ind) { this.dialogImageUrl = this.imgList[ind]; this.dialogVisible = true; }, }, }; </script> <style scoped> .image-wrapper { padding: 10px 10px; } .inputer { width: 100px; height: 100px; display: none; } .img-wrapper { display: flex; flex-direction: row; justify-content: left; flex-wrap: wrap; } .image-wrapper .upload-icon { height: 100px; text-align: center; border: 1px solid #dbdbdb; border-radius: 5px; } .img-wrapper .item { position: relative; overflow: hidden; width: 150px; height: 150px; border-radius: 5px; text-align: center; margin-right: 20px; } .img-wrapper .item .modal { display: none; } .img-wrapper .item:hover .modal { display: inline-block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } .modal span:nth-child(1) { line-height: 150px; color: #fff; margin-right: 10px; font-size: 18px; } .modal span:nth-child(2) { line-height: 150px; color: #fff; margin-left: 10px; font-size: 18px; } .img-wrapper .item .dis-image { width: 100%; height: 100%; } /* .image-wrapper .item .delete { display: inline-block; position: absolute; background-color: #000; width: 20px; height: 20px; color: #fff; font-size: 16px; border-radius: 0 0 0 80%; top: 0; right: 0; line-height: 20px; } */ .img-wrapper .item .heng { position: absolute; display: inline-block; width: 30px; height: 3px; background: #dbdbdb; left: 50%; top: 50%; transform: translate(-50%, -50%); } .img-wrapper .item .su { position: absolute; display: inline-block; width: 3px; height: 30px; background: #dbdbdb; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style>
原文地址:https://www.cnblogs.com/mr17/p/15038164.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Yii2框架控制器、路由、Url生成操作示例
- Laravel框架实现调用百度翻译API功能示例
- phpstudy2018升级MySQL5.5为5.7教程(图文)
- laravel实现简单用户权限的示例代码
- tp5(thinkPHP5框架)时间查询操作实例分析
- PHP使Laravel为JSON REST API返回自定义错误的问题
- 详解PHP PDO简单教程
- Python实现ElGamal加密算法的示例代码
- PHP实现基于状态的责任链审批模式详解
- django rest framework使用django-filter用法
- 通过实例解析python创建进程常用方法
- thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
- OpenCV 之按位运算举例解析
- Python实时监控网站浏览记录实现过程详解
- php中的buffer缓冲区用法分析