elementui图片上传php,vue+Element Ui 实现自动上传图片

点击上传文件按钮 beforeAvatarUpload方法自动上传1到多个图片

class="upload-demo"

ref="upload"

accept=".jpg"

multiple

:data="radio"

:action="actionUrl"

:on-preview="handlePreview"

:on-remove="handleRemove"

list-type="picture"

:file-list="fileList"

:before-upload="beforeAvatarUpload">

上传文件

**//上传画稿之前先判断画稿规格再插oracle 再post到php

//为了解决onload异步使用promise**

beforeAvatarUpload:function(file) {

var _this = this;

return new Promise(function(resolve, reject) { //为了解决onload异步使用promise

if(file.name.length > 100){

_this.$alert(file.name+'图片名称字符长度超过100,不能上传!', '提示', {confirmButtonText: '确定'});

reject();

return;

}

var reader = new FileReader();

var img_oracleFlag = false;

reader.onload = function(event) { //onload是异步的

var image = new Image();

image.onload = function () {

var width = this.width;

var height = this.height;

if (width>height && vm.radio.GGH=="小牌"){

_this.$alert(file.name+'不能上传!', '提示', {confirmButtonText: '确定'});

reject();

return;

}else if (width

_this.$alert(file.name+'不能上传!', '提示', {confirmButtonText: '确定'});

reject();

return;

}else{

img_oracleFlag = true;

//插入oracle

$.ajax({ //必须使用同步ajax

url : OracleInterface,

type : 'post',

dataType : 'json',

async:false,

data : {},

success : function(res) {},

error : function(data) {},

})

}

resolve();

};

image.src = event.target.result;

}

reader.readAsDataURL(file);

});

return true

elementui图片上传php,vue+Element Ui 实现自动上传图片相关推荐

elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
ueditor 图片上传 java_Spring+Vue整合UEditor富文本实现图片附件上传的方法
下载UEditor 下载完整源码和JSP版本 Spring后端集成 1. 解压完整源码,拷贝jsp目录下的java源码,到spring mvc后端 jsp目录下java源码集成spring mvc后 ...
ElementUI图片上传回显
html内容 <el-row><el-col :span="24"><el-form-item label=&q ...
图片上传组件_配置Django-TinyMCE组件实现上传图片功能
Django自带的Admin后台,好用,TinyMCE作为富文本编辑器,也蛮好用的,这两者结合起来在做博客的时候很方便(当然博客可能更适合用Markdown来写),但是Django-TinyMCE这个 ...
element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...
VUE+ElementUI图片上传的判断格式、大小、尺寸（即宽高比）完整实现。
需求分析: 表单中需要上传图片,并对图片做出限制: 1)上传图片大小不能超过 2M: 2)上传图片格式只能是jpg或png: 3)上传图片的宽高比例为2:1. 效果如图所示: 利用on-change的 ...
php图片上传怎么跨域,ajax跨域上传图片（后端php）完整例子
1.html内容: 上传截图: 成功文件: 2.js代码: function uploadImage(){ //获取图片 var file = $('#uploadFile')[0].files[0] ...
html 图片上传跨域,html5 ajax 跨域上传图片
html: js: // 读取地址 function readURL(input, tmpimg) { if (input.files && input.files[0]) { var ...
Vue项目实战之人力资源平台系统（十）图片上传和打印员工信息
前言目录前言一.配置腾讯云空间存储图片 1.1 配置步骤二.图片上传流程解析三.实现文件上传组件 3.1 安装依赖 3.2 上传图片组件的基本布局 3.3 全局注册组件 3.4 点击图片进行 ...

elementui图片上传php,vue+Element Ui 实现自动上传图片

elementui图片上传php,vue+Element Ui 实现自动上传图片相关推荐

最新文章

热门文章