a-upload自定义上传图片

<template><div><a-uploadclass="upload-btn":action="'#'":show-upload-list="false":customRequest="httpRequest":before-upload="beforeUpload">顶部图片</a-upload></div>
</template><script>
import { uploadArticleFile } from '@/api/edit'
export default {components: {},data () {return {}},mounted () {},methods: {async httpRequest (file) {const formData = new FormData()const _this = thisconst reader = new FileReader()reader.readAsDataURL(file.file)reader.addEventListener('loadend', function (e) {const image = new Image()image.src = e.target.resultimage.onload = async function () {if (image.width !== 1920 || image.height !== 268) {_this.$message.error('需要符合要求尺寸的图片！')return false} else {formData.append('file', file.file)const { code, data } = await uploadArticleFile(formData)if (code === 200) {_this.$message.success('上传成功！')_this.$emit('uploadImg', data.url)} else {_this.$message.error('上传失败！请重新上传')}}}})},// 检查图片格式和图片大小， 限制1920尺寸async beforeUpload (file) {// 图片格式限制为 jpeg、pngconst isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'if (!isJpgOrPng) {this.$message.error('请选择jpg/png图片')return false}// 图片大小限制为 10M以内const isLt10M = file.size / 1024 / 1024 <= 10if (!isLt10M) {this.$message.error('图片大小不能超过10MB，请重新上传')return false}return isJpgOrPng && isLt10M}}
}
</script>
<style lang="less" scoped>
.upload-btn {width: 100%;height: 76px;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #fafafa;border: 1px dashed #d9d9d9;border-radius: 2px;cursor: pointer;margin-bottom: 10px;/deep/ .ant-upload {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
}
</style>

a-upload自定义上传图片相关推荐

ueditor 编辑html文件名,UEditor编辑器自定义上传图片或文件路径的修改方法，ueditor修改方法...
UEditor编辑器自定义上传图片或文件路径的修改方法,ueditor修改方法使用ueditor编辑器,附件默认在ueditor/php/upload/, 我的附件地址是网站根目录下/data/u ...
antd Upload 自定义上传
需求由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件导致上传路径为空情况解决办法使用自定义上传 // 自定义上 ...
element-ui自定义上传图片
按照element ui官网的说法,http-request 覆盖默认的上传行为,可以自定义上传的实现. 个人编写的自定义上传图片代码实现如下: html部分: <div class=" ...
【vue开发问题-解决方法】（九）使用element upload自定义接口上传文件，input多文件上传
[vue开发问题-解决方法](九)使用element upload自定义接口上传文件,input多文件上传参考文章: (1)[vue开发问题-解决方法](九)使用element upload自定义接 ...
vue-quill-editor富文本编辑器自定义上传图片功能
问题描述:vue-quill-editor富文本默认上传图片是将图片转换成base64进行存储,字段过长:然后进行自定义上传图片,只保存图片路径,减少服务器压力解决思路: 1.先创建一个上传图片的组 ...
vue-quill-editor 富文本编辑器自定义上传图片
① 安装插件,以及引入插件使用命令:npm install vue-quill-editor -S ② main.js 中引入 // 导入富文本编辑器 import VueQuillEditor f ...
React中：富文本编辑器(react-quill),自定义上传图片到七牛云
1.组件封装 import React, { useState, useEffect, useRef } from 'react'; import ReactQuill from 'react-qui ...
使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法
使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法使用angular框架写前端的用户一般都比较喜欢用ngZorro,本人最近在使用ngZorro中的Upload自定 ...
Ant Design Upload 自定义上传 customRequest
本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现目录 Upload 常用属性和方法默认上传 customRequest 自定义上传 Upload 自定 ...
储存quill与php,Quill自定义上传图片
Quill-Demo body { padding: 10px 30px; } #editor { min-height: 180px; } Quill自定义上传图片 /* 编辑器操作条选项 */ v ...

a-upload自定义上传图片

a-upload自定义上传图片相关推荐

最新文章

热门文章