请问需要压缩上传图片可以如何操作 about form-create HOT 27 CLOSED

这个之前没有考虑到，你可以试一下。如果遇到什么问题可以提出

from form-create.

onExceededSize这个方法可以返回文件吗

from form-create.

文件超出指定大小限制时的钩子，返回字段为 file, fileList

from form-create.

请问一下上传的代码具体在哪里

from form-create.

这个都是内部封装好的,只预留了一些钩子

           //上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传
            "beforeUpload":()=>{}, 
            //文件上传时的钩子，返回字段为 event, file, fileList
            "onProgress":()=>{}, 
            //文件上传成功时的钩子，返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可
            "onSuccess":function () {
                return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';
            }, //必填!
            //文件上传失败时的钩子，返回字段为 error, file, fileList
            "onError":(error, file, fileList)=>{}, 
            //点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据
            "onPreview":()=>{}, 
            //文件列表移除文件时的钩子，返回字段为 file, fileList
            "onRemove":()=>{}, 
            //文件格式验证失败时的钩子，返回字段为 file, fileList
            "onFormatError":()=>{}, 
            //文件超出指定大小限制时的钩子，返回字段为 file, fileList
            "onExceededSize":()=>{}, 

from form-create.

似乎没有办法对图片进行替换，将原图片替换为压缩后的图片

from form-create.

不行的话,可以自己重写图片上传,后面我想想有没有好一点的方案

"beforeUpload":(file)=>{
//TODO 图片压缩
//TODO 图片上传
//TODO 手动更新字段的值
return false;
}

from form-create.

谢谢，我试试

from form-create.

请问可以直接调用onSuccessde 方法吗

from form-create.

不行的

from form-create.

请问我要怎么做才能
var pic = _this5.uploadOptions.onSuccess.call(null, response, file, fileList);
setTimeout(function () {
_this5.vm.formData[field].status = 'normal';
pic && _this5.handler.push(pic);
}, 300);、
转换这段代码

from form-create.

你现在想达到什么效果?

from form-create.

我现在已经把图片上传上去了，请问如何在前台展现//TODO 手动更新字段的值

from form-create.

顺便请问一下，如何可以显示上传进度条

from form-create.

上传进度目前只有默认的上传才支持,后面可以增加这个功能.
手动更新字段

var pics = $f.getValue('uploadField');
pics.push(pic);
$f.changeField('uploadField',pics);

from form-create.

非常感谢

from form-create.

var pics = $f.getValue('uploadField'); 请问这个uploadField是我的字段名称吗

from form-create.

是的

from form-create.

可是调用push()方法的时候报错pics.push is not a function

from form-create.

//input值,当maxLength等与1时值为字符串,大于1时值为数组
// maxLength 等与1的时候
$f.changeField('uploadField',pic);

from form-create.

谢谢

from form-create.

解决了，请问需要提供一下，压缩图片的代码给您吗

from form-create.

可以呀 分享一下

from form-create.

mock.js//封装的数组`
function hidden(field, value) {
var temp = {
type : "hidden",
field : field,
value : value
}
return temp;
}

function text(title, field, value, require) {
// 0.必填 1.不必填
var required = false;
if (require == 0) {
required = true;
}
var temp = {
type : "input",
title : title,// label名称
field : field,// 字段名称
value : value,// input值,
props : {
"type" : "text", // 输入框类型，可选值为
// text、password、textarea、url、email、date
"clearable" : false, // 是否显示清空按钮
"disabled" : false, // 设置输入框为禁用状态
"readonly" : false, // 设置输入框为只读
"rows" : 4, // 文本域默认行数，仅在 textarea 类型下有效
"autosize" : false, // 自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows:
// 2, maxRows: 6 }
"number" : false, // 将用户的输入转换为 Number 类型
"autofocus" : false, // 自动获取焦点
"autocomplete" : "off", // 原生的自动完成功能，可选值为 off 和 on
"placeholder" : "请输入" + title, // 占位文本
"size" : "default", // 输入框尺寸，可选值为large、small、default或者不设置,
"spellcheck" : false
// 原生的 spellcheck 属性
},
validate : [ {
required : required,
message : "请输入" + title,
trigger : 'blur'
} ]

}
return temp;

}

function radio(title, field, value, require) {
// 0.必填 1.不必填
var required = false;
if (require == 0) {
required = true;
}
var arr = value.split(",");
var optionArr = [];
for (var i = 0; i < arr.length; i++) {
optionArr.push({
value : arr[i],
label : arr[i],
disabled : false
});
}
var temp = {
type : "radio",
title : title,// label名称
field : field,// 字段名称
value : arr[0],// input值,
options : optionArr,
props : {
"type" : undefined, // 可选值为 button 或不填，为 button 时使用按钮样式
"size" : "default", // 单选框的尺寸，可选值为 large、small、default 或者不设置
"vertical" : false
// 是否垂直排列，按钮样式下无效
},
validate : [ {
required : required,
message : "请选择" + title,
trigger : 'blur'
} ]

}
return temp;

}

function checkbox(title, field, value, require) {
// 0.必填 1.不必填
var required = false;
if (require == 0) {
required = true;
}
var arr = value.split(",");
var optionArr = [];
for (var i = 0; i < arr.length; i++) {
optionArr.push({
value : arr[i],
label : arr[i],
disabled : false
});
}
var temp = {
type : "checkbox",
title : title,// label名称
field : field,// 字段名称
value : [],// input值,
options : optionArr,
props : {
"size" : "default", // 多选框组的尺寸，可选值为 large、small、default 或者不设置
},
validate : [ {
required : required,
message : "请选择" + title,
trigger : 'blur'
} ]

}
return temp;

}

function switchBtn(title, field, value, require) {
// 0.必填 1.不必填
var required = false;
if (require == 0) {
required = true;
}
var arr = value.split(",");
var slotArr = [];
for (var i = 0; i < arr.length; i++) {
slotArr.push({
open : arr[i],// 自定义显示打开时的内容
close : arr[i]// 自定义显示关闭时的内容
});
}
var temp = {
type:"switch",
title:title,// label名称
field : field,// 字段名称
value:arr[0],// input值,
props: {
"size":"default", // 开关的尺寸，可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字，使用
// large。
"disabled":false,// 禁用开关
"trueValue":"1", // 选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
"falseValue":"0" // 没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
},
slot: slotArr, // slot可以不用配置
validate : [ {
required : required,
message : "请选择" + title,
trigger : 'blur'
} ]
}
return temp;
}

function select(title, field, value, require) {
// 0.必填 1.不必填
var required = false;
if (require == 0) {
required = true;
}
var arr = value.split(",");
var optionsArr = [];
for (var i = 0; i < arr.length; i++) {
optionsArr.push({
value : arr[i],
label : arr[i],
disabled: false
});
}
var temp = {
type: "select",
title: title,
field : field,
value: arr[0],
props: {
"multiple": false, // 是否支持多选
"clearable": false, // 是否可以清空选项，只在单选时有效
"filterable": false, // 是否支持搜索
// 暂不支持远程搜索
// "remote": false, //是否使用远程搜索
// "remote-method":Function, //远程搜索的方法
// "loading": false, //当前是否正在远程搜索
// "loading-text": "加载中", //远程搜索中的文字提示
"size":"default", // 选择框大小，可选值为large、small、default或者不填
"placeholder": "请选择", // 选择框默认文字
"not-found-text": "无匹配数据", // 当下拉列表为空时显示的内容
"placement": "bottom", // 弹窗的展开方向，可选值为 bottom 和 top
"disabled": false // 是否禁用
},
options: optionsArr,
validate : [ {
required : required,
message : "请选择" + title,
trigger : 'blur'
} ]
}
return temp;
}

function DatePicker(title, field, value, require) {
// 0.必填 1.不必填
var required = false;
if (require == 0) {
required = true;
}
var temp = {
type: "DatePicker",
title: title,
field : field,
value: new Date(), // input值, type为daterange,datetimerange value为数组
// [start_value,end_value]
props: {
"type": "date", // 显示类型，可选值为
// date、daterange、datetime、datetimerange、year、month
"format": "yyyy-MM-dd", // 展示的日期格式
"placement": "top-start", // 日期选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
"placeholder":"请选择办理时间", // 占位文本
"confirm":false, // 是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭
"size":"default", // 尺寸，可选值为large、small、default或者不设置
"disabled":false, // 是否禁用选择器
"clearable":true, // 是否显示清除按钮
"readonly":false, // 完全只读，开启后不会弹出选择器
"editable":false, // 文本框是否可以输入
},
validate : [ {
required : required,
message : "请选择" + title,
trigger : 'blur'
} ]
}
return temp;
}

function TimePicker(title, field, value, require) {
// 0.必填 1.不必填
var required = false;
if (require == 0) {
required = true;
}
var temp = {
type: "TimePicker",
title: title,
field : field,
value: [], // input值, type为timerange value为数组
// [start_value,end_value]
props: {
"type": "time", // 显示类型，可选值为 time、timerange
"format": "HH:mm:ss", // 展示的时间格式
"steps": [], // 下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15]
// 时，分钟会显示：00、15、30、45。
"placement": "bottom-start", // 时间选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
"placeholder": "请选择办理时间", // 占位文本
"confirm":false, // 是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭
"size":"default", // 尺寸，可选值为large、small、default或者不设置
"disabled":false, // 是否禁用选择器
"clearable":true, // 是否显示清除按钮
"readonly":false, // 完全只读，开启后不会弹出选择器
"editable":false, // 文本框是否可以输入
},
validate : [ {
required : required,
message : "请选择" + title,
trigger : 'blur'
} ]
}
return temp;
}

function InputNumber(title, field, value, require) {
// 0.必填 1.不必填
var required = false;
if (require == 0) {
required = true;
}
var temp = {
type: "InputNumber",
title: title,
field : field,
value: 0, // input值
props: {
"max": undefined, // 最大值
"min": undefined, // 最小值
"step": 1, // 每次改变的步伐，可以是小数
"size":"default", // 输入框尺寸，可选值为large、small、default或者不填
"disabled":false, // 设置禁用状态
"readonly":false, // 是否设置为只读
"editable":true, // 是否可编辑
"precision":0, // 数值精度
},
validate : [ {
required : required,
message : "请输入" + title,
trigger : 'blur'
} ]
}
return temp;
}

function Upload(title, field, value, require) {
// 0.必填 1.不必填
var required = false;
if (require == 0) {
required = true;
}
var temp = {
type: "Upload",
title: title,
field : field,
value: [], // input值
props: {
//上传控件的类型，可选值为 select（点击选择），drag（支持拖拽）
"type":"select", //必填!
//上传文件类型，可选值为 image（图片上传），file（文件上传）
"uploadType":"image", //必填!
//上传的地址
"action": getRealPath()+"/intention/uploadimage", //必填!
//上传的文件字段名
"name":"file",
//上传时附带的额外参数
"data":{},
//设置上传的请求头部
"headers": {},
//是否支持多选文件
"multiple": false,
//支持发送 cookie 凭证信息
"withCredentials":false,

            //不支持
            // "showUploadList":false, //是否显示已上传文件列表
            // "defaultFileList":[], // 默认已上传的文件列表
			
            //接受上传的文件类型
            "accept":"image/*",
            //支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用
            "format":["BMP","JPG","JPEG","PNG","GIF"], 
            //文件大小限制，单位 kb
            "maxSize":undefined, 
            //可上传文件数量
            "maxLength":1,
            //上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传
            "beforeUpload":(file)=>{
            	//name:"来电名片.jpg" size:3342813 type : "image/jpeg"
            	console.log(file);
            	// 调用函数，对图片进行压缩  并上传
            	selectFileImage(file, null, this, field);
            	return false;
            }, 
            //文件上传时的钩子，返回字段为 event, file, fileList
            "onProgress":()=>{}, 
            //文件上传成功时的钩子，返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可
            "onSuccess":function (response,file,fileList) {
                return response.httpurl;
            }, //必填!
            //文件上传失败时的钩子，返回字段为 error, file, fileList
            "onError":(error, file, fileList)=>{}, 
            //点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据
            "onPreview":()=>{}, 
            //文件列表移除文件时的钩子，返回字段为 file, fileList
            "onRemove":()=>{}, 
            //文件格式验证失败时的钩子，返回字段为 file, fileList
            "onFormatError":()=>{
            	message("请上传图片");
            }, 
            //文件超出指定大小限制时的钩子，返回字段为 file, fileList
            "onExceededSize":()=>{}, 
            //辅助操作按钮的图标 ,设置为false将不显示
            //handleIcon:'ionic',
            //点击辅助操作按钮事件
            //onHandle:(src)=>{},
            //是否可删除,设置为false是不显示删除按钮
            allowRemove:true,
        },
	    validate : [ {
			required : required,
			message : "请上传" + title,
			trigger : 'blur'
		} ]
	}
return temp;

}

//获取路径
function getRealPath(){
var localObj = window.location;
var contextPath = localObj.pathname.split("/")[1];
var basePath = localObj.protocol + "//" + localObj.host + "/"+ contextPath;
return basePath ;
}

//上传图片
function selectFileImage(fileObj,inputIndex,$_this,field) {
layer.open({
type: 2,
content: '提交中',
shadeClose: false
});
var file = fileObj;
var Orientation = null;
var base64="";
if (file) {
var rFilter = /^(image/jpeg|image/png|image/jpg)$/i;
if(file.type){
if (!rFilter.test(file.type)) {
alert("您的图片格式有误");
var code="";
for(var key in file){code+=key+";";}
return;
}
}
// //等待提醒
// vueP.isLoad=true;
// /addseries.html/.test(location.href)?document.getElementsByClassName("popupWaiting")[0].style.display="block":'';
//插件 处理图片旋转
EXIF.getData(file, function() {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
});
var oReader = new FileReader();
oReader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
//压缩图片宽的值
if(this.naturalWidth > this.naturalHeight){
if(this.naturalWidth > 960){
expectWidth = 960;
expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
}
}
//压缩图片高的值
if(this.naturalWidth < this.naturalHeight){
if(this.naturalHeight > 960){
expectHeight = 960;
expectWidth = expectHeight * this.naturalWidth / this.naturalHeight ;
}
}
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
//0.9为图片质量0-1 0为最差 1为最好
base64 = canvas.toDataURL("image/jpeg", 0.9);
if(Orientation != "" && Orientation != 1){
var canvasRotateImage=new Image();
canvasRotateImage.src=base64;
canvasRotateImage.onload = function(){
switch(Orientation){
case 6:
rotateImg(this,'left',canvas);
break;
case 8:
rotateImg(this,'right',canvas);
break;
case 3:
rotateImg(this,'right',canvas,2);
rotateImg(this,'right',canvas,2);
break;
}
base64 = canvas.toDataURL("image/jpeg", 0.9);
upLoadImageFtn($_this,fileObj,base64,inputIndex,field);
}
}
else{
upLoadImageFtn($_this,fileObj,base64,inputIndex,field);
}
};
};
oReader.readAsDataURL(file);
};
}

function rotateImg(img, direction,canvas,two) {
var min_step = 0;
var max_step = 3;
if (img == null)return;
var height = img.height;
var width = img.width;
var step = 2;
if(two==2){
step=1;
}
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}

var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
    case 0:
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0);
        break;
    case 1:
        canvas.width = height;
        canvas.height = width;
        ctx.rotate(degree);
        ctx.drawImage(img, 0, -height);
        break;
    case 2:
        canvas.width = width;
        canvas.height = height;
        ctx.rotate(degree);
        ctx.drawImage(img, -width, -height);
        break;
    case 3:
        canvas.width = height;
        canvas.height = width;
        ctx.rotate(degree);
        ctx.drawImage(img, -width, 0);
        break;
}

}

//上传数据
function upLoadImageFtn($_this,fileObj,base64,inputIndex,field){
var formdata = new FormData();
formdata.append("file", base64);
formdata.append("flag", 2);
formdata.append("type", ".jpg");
$.ajax({
type:"POST",
url:getRealPath()+"/intention/uploadimage",
data:formdata,
contentType: false,
processData: false,
mimeType:"multipart/form-data",
beforeSend: function(){
// Handle the beforeSend event
console.log("beforeSend");
},
success:function(d){
console.log(d);
d = $.parseJSON(d);
console.log($_this);
if(d.code == "200"){
// input值,当maxLength等与1时值为字符串,大于1时值为数组
// maxLength 等与1的时候
var pic = d.httpurl;
$f.changeField(field,pic);
//大于1时值为数组
//var pics = $f.getValue(field);
//pics.push(pic);
//$f.changeField(field,pics);
}else{
message("上传失败");
}
},
complete: function(){
// Handle the complete event
console.log("complete");
layer.closeAll('loading');
}

});

}

//页面判断展示
function checkPage(imgSrc,type){
if(/addseries.html/.test(location.href)){
document.getElementsByClassName("popupWaiting")[0].style.display="none";
document.getElementById("seiresImg").style.display="block";
document.getElementById("seiresImg").src='http://42.62.66.198:8003/'+imgSrc;
}
if(/pdfSet.html|setPageTitle.html/.test(location.href)){
if(type&&type==='seriesLogo'){
vueP.seriesImg=imgSrc;
}else{
vueP.companyRemark=imgSrc;
}
}
}

from form-create.

exif.js还需要引用一个js

from form-create.

好的 感谢,后面会增加生成rule的方法

from form-create.

感谢你的分享这个插件

from form-create.