extjs多文件上传的问题

Posted 2020-07-01 ext初学者

最近公司让改需求，一个字段要保存三张图片 ，前端用extjs写，后台用spring接，个人的想法是把传进来的三张图片用拼串的格式放进去，可是取的时候就不行了，老是报越界

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile file = multipartRequest.getFile("imgFile");

 String filename = file.getOriginalFilename();

 String newFileRetName = "";

String path = StringConstants.UPLOAD_RIGHTDRUG_PATH+newId+"/";

if (file != null)
{
if (StringUtils.hasText(filename))
{
try
{
File f = new File(fileUtil.getRealPath(path));
if (!f.exists())
f.mkdirs();
filename = filename.substring(filename.lastIndexOf("\\") + 1);
String subfix = filename.substring(filename.lastIndexOf("."));
String newFileName = CommonHelper.getGUID() + subfix;

InputStream in = file.getInputStream();
FileOutputStream out = new FileOutputStream(fileUtil.getRealPath(CommonHelper.joinString(
path, "/", newFileName)));
byte buffer[] = new byte[1024];
int len = 0;
while ((len = in.read(buffer)) > 0)
{
out.write(buffer, 0, len);
}
in.close();
out.close();
newFileRetName = CommonHelper.joinString(path, newFileName);

if(StringUtils.hasText(treatmentrecord.getMedicalrecord())){
File oldFile = new File(fileUtil.getRealPath(treatmentrecord.getMedicalrecord()));
oldFile.delete();
}
}
catch (Exception ex)
{
throw ex;
}
}
}

treatmentrecord.setMedicalrecord(newFileRetName)

上面是后台存文件代码 

下面是extjs的代码

{
id : ‘imgFile‘,
name : ‘imgFile‘,
inputType : "file",
fieldLabel : ‘病历1‘,
xtype : ‘textfield‘,
// hidden: 101,
// hideLabel :101,
anchor : ‘100%‘
},
{
xtype : ‘box‘,
id : ‘browseImage‘,
fieldLabel : "图片预览",
// hidden: 101,
// hideLabel :101,
autoEl : {
width : 150,
height : 100,
tag : ‘img‘,
// type : ‘image‘,
src :‘<%="".equals(CommonHelper.getNULLString(treatmentrecord.getMedicalrecord()))?"Ext.BLANK_IMAGE_URL":request.getContextPath()+"/"+medicalrecord%>‘ ,
style : ‘filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);‘,
complete : ‘on‘,
id : ‘imageBrowse‘
}
},

以及图片预览代码

listeners : {
‘render‘ : function(f) {
this.form.findField(‘imgFile‘).on(‘render‘, function() {
//通過change事件,图片也动态跟踪选择的图片变化
Ext.get(‘imgFile‘).on(‘change‘, function(field, newValue, oldValue) {
//得到选择的图片路径
var url = Ext.get(‘imgFile‘).dom.value;
// var url = ‘file://‘ + Ext.get(‘imgFile‘).dom.value;
//是否是规定的图片类型
if (img_reg.test(url)) {
if (Ext.isIE) {
var image = Ext.get(‘imageBrowse‘).dom;
image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片
image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
}// 支持FF
else {
var files = document.getElementById("imgFile");
var file = files.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("imageBrowse");
pic.src=this.result;
}
}
}else{
Ext.get(‘imgFile‘).dom.files.item(0).setAsDataURL("");
}
}, this);
}, this);

单张图片的添删改查都可以实现，一到多张就报问题！！

现在还在头疼中