vue 封装饿了么文件上传组件实现图片上传

elUpload里的很多回调方法,对于同一个项目来说,很多都是共用的和重复的.所以针对自家项目稍微做了封装,

简单实现了:1.图片大小,数量限制和提示,2.超出数量隐藏上传按钮的功能.3.校验必填

不足:图片是立刻上传而不是确认后上传 ,比较占用资源,后续希望优化这部分.

代码:

<template><div><el-uploadaccept="image/png, image/jpg, image/jpeg"name="multipartFile"list-type="picture-card"multiple:limit="limitNum":action="uploadApi":headers="headers":data="typeData":file-list="fileList":before-upload="beforeUpload":on-change="handleChange":on-exceed="handleExceed":on-success="handleSuccess":on-remove="handleRemove":on-error="handleError"><i class="el-icon-plus addMore"></i></el-upload><p>只能上传jpg/png格式文件，文件不能超过50kb</p></div>
</template>

<script>import {getAccessToken} from '@/utils'import config from "@/config"export default {name: 'PictureUpload',computed: {headers() {const token = getAccessToken()return {Authorization: token};},},watch: {initPics(val){this.picStr = valthis.initFileList()}},other: { //深度观察对象handler(val){},deep: true},props: {limitNum: {type: Number,default: 1},limitSize: {type: Number,default: 3},uploadApi: {type: String,default: ""},typeData: {type: Object,default: null},initPics: {type: String,default: ""}},data(){return {fileList: [],//当前页面显示的图片列表picList: [], //用于保存符合格式的当前页面显示的图片列表picStr: ""}},methods: {initFileList(){const params = this.initPicsif (params.length > 0) {this.fileList = params.split(";").map(value => {return {url: url + value}})}this.hideOrShowAddMoreIcon(this.fileList)},emitChange(){this.$emit("onChange", this.picStr)},beforeUpload(file){return this.checkBeforeUpload(file)},handleChange(file, fileList){this.hideOrShowAddMoreIcon(fileList)},handleExceed(file, fileList){this.$message({message: '最多上传' + this.limitNum + '张', type: "warning"})},handleSuccess(res, file, fileList){let arr = []let oldPicStr = this.picStrarr.push(res.data.name)arr.unshift(oldPicStr)if (oldPicStr == "") {this.picStr = arr.join(";").slice(1)} else {this.picStr = arr.join(";")}this.picList = arr},handleRemove(file, fileList){let arr = []fileList.forEach(element => {let url = ''if (typeof(element.response) != "undefined") {url = element.response.data.name} else {url = element.url.split('=')[1]}if (url != undefined) {arr.push(url)}})this.picStr = arr.join(";")this.picList = arrthis.hideOrShowAddMoreIcon(fileList)},handleError(err, file, fileList){this.hideOrShowAddMoreIcon(fileList)},checkBeforeUpload(file){const isJPGorPNG = file.typeconst isLt = (file.size / 1024 / 1024) < this.limitSizevar flag = trueif (isJPGorPNG !== 'image/jpeg' && isJPGorPNG !== 'image/png') {this.$message.error('上传图片只能是JPG或者PNG格式!')flag = false}if (!isLt) {this.$message({showClose: true,message: '图片: ' + file.name + ' 太大，请压缩后再上传！',type: 'warning'})flag = false}return flag},hideOrShowAddMoreIcon(fileList){let a = document.getElementsByClassName('addMore')[0]if (a) {let parentElement = a.parentNodeif (fileList.length >= this.limitNum) {parentElement.style.display = "none"} else {parentElement.style.display = "inline-block"}}this.emitChange()}}}
</script>

其中,import 的是项目获取本地token;config里获取项目路径.如果是小白,可直接把这两个属性也绑定到props上,通过父传子的方法使用.

使用方法:

在父组件:

1.引入:import PictureUpload from 'components/PictureUpload'
2.组件:<el-form-item label="图片:" prop="pics"><picture-uploadlist-type="picture-card"name="multipartFile"accept="image/png, image/jpg, image/jpeg":limitNum="limitNum":typeData="typeData":uploadApi="uploadApi":initPics = "initPics"@onChange="change"></picture-upload></el-form-item>
3.change方法:change(childValue){this.form.pics = childValue           // 回传给form表单的值// this.$refs.form.validateField('pics') // 这里可以触发自己定义的必填校验},
4.data(){return{limitNum:3,initPics:"",uploadApi: "http://xxxxx",typeData: {type: 'topic'}, }
}
5.校验 rules: { pics: [ { required: true, validator: this.picCheck , trigger: 'blur'}]}
6.picCheck方法:picCheck(rule,value,callback){ //方法内规则可以自定义if(this.form.pics.trim().length>0){ //至少上传一张校验callback()                    }else{callback(new Error('请上传至少一张图片!'));}}

vue 封装饿了么文件上传组件实现图片上传相关推荐

(vue+【饿了么UI】tag组件封装)
(vue+[饿了么UI]tag组件封装) 根据项目所衍生的一种tag组件,废话不多说直接上代码 <template> <div><d ...
Vue项目实战之人力资源平台系统（十）图片上传和打印员工信息
前言目录前言一.配置腾讯云空间存储图片 1.1 配置步骤二.图片上传流程解析三.实现文件上传组件 3.1 安装依赖 3.2 上传图片组件的基本布局 3.3 全局注册组件 3.4 点击图片进行 ...
vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: 参考文章: (1)vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: (2)https://www.cnblogs.co ...
php上传图片限制类型,php,_使用php的图片上传类进行图片上传，总是提示：上传文件时出错 : 未允许类型。都是默认的配置，php - phpStudy...
使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置 $upl ...
java 图片上传_java web图片上传和文件上传实例
本篇文章主要介绍了java web图片上传和文件上传实例,具有一定的参考价值,有需要的可以了解一下. 图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多 ...
php 图片上传水印,PHP - 图片上传并添加水印
一个的面向过程的 PHP 图片上传并对其添加文字水印的功能. 还有很多待需完善的地方. index.php $conn=@mysql_connect("localhost",&qu ...
antd的联级选择器异步调用编辑回显_react-uplod-img 是一个基于 React antd组件的图片上传组件...
react-uplod-img 是一个基于 React antd组件的图片上传组件支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 图片精确的尺寸限制排序等功能需要 re ...
SpringBoot 使用MultipartFile上传组件实现本地上传用户头像
GIF动图展示 SpringBoot 使用MultipartFile上传组件实现本地上传用户头像GIF效果图本章目录 GIF动图展示主要实现思路 1.使用MultipartFile需要引入的依赖 ...
对于 React 结合 Antd 的 Upload 组件实现图片上传
一. React 结合 Antd 实现图片上传引入所需相关的组件和文件,代码如下所示: import React, { Component } from 'react' import PropTyp ...

vue 封装饿了么文件上传组件实现图片上传

vue 封装饿了么文件上传组件实现图片上传相关推荐

最新文章

热门文章