element upload 后台如何接数据---记录
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
本人小白一个,在项目中使用element upload踩了好多坑。项目前台为vue+element,后台为Springboot,图片存储在七牛云上。采坑原因对底层东西不理解,对项目所使用的框架不熟悉。
问题描述:
element upload传输的数据格式:request payload(刚刚看到都不明白这是一种数据格式)
在后台使用了各种方法接数据都不行,后面直接从HttpServletRequest中拿数据流来接数据还是不行。最后查询了一下request payload才发现request payload是一种数据格式,百度request payload的接收方法才成功接收到request payload。
@RequestMapping("/upload")
public String uploadPic(HttpServletRequest request,HttpServletResponse resp){
InputStream is;
ServletOutputStream out;
String key=null;
try {
Collection<Part> parts=request.getParts();
Iterator<Part> iterator=parts.iterator();
while (iterator.hasNext()) {
Part part = iterator.next();
System.out.println("类型名称————" + part.getName());
System.out.println("-----类型------->" + part.getContentType());
System.out.println("提交的类型名称———" + part.getSubmittedFileName());
System.out.println("流————" + part.getInputStream());
is = part.getInputStream();
}
} catch (Exception e) {
e.printStackTrace();
}
return key;
}
后面直接从HttpServletRequest中拿数据流来接数据还是不行的原因:request payload把每传输的一个数据分布封装成了一个Part,首先要从request中拿到Part,才能从Part中拿到数据。
使用element upload想要传输额外的数据怎么办???
<div>
<el-upload
class="upload-demo"
action="http://localhost:8080/productPic/upload2"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="uploadBack"
:file-list="fileList2"
list-type="picture"
:data="picData"
>
<el-button size="small" type="primary" >点击产品图片上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
额外的数据可以放到:data中传输,其中data中的数据也随action发出请求时与选择的图片数据(这里传输的为图片)一起以request payload数据格式传输,传输的顺序为data-->图片数据
picData:{pid,uls}
后台按传输的顺序接就可以了
public void uploadPicEdit(HttpServletRequest request,HttpServletResponse resp){
String fileName=null;
InputStream is;
int pid=-1;
String urls="";
String key="";
ServletOutputStream out;
try {
Collection<Part> parts=request.getParts();
Iterator<Part> iterator=parts.iterator();
while (iterator.hasNext()) {
Part part = iterator.next();
String partName=part.getName();
if( part.getContentType()==null){
is=part.getInputStream();
byte[]bytes=new byte[1024];
int nRead = 1;
int nTotalRead = 0;
while (nRead > 0) {
nRead = is.read(bytes, nTotalRead, bytes.length - nTotalRead);
if (nRead > 0)
nTotalRead = nTotalRead + nRead;
}
is.close();
String str = new String(bytes, 0, nTotalRead, "utf-8");
if("pid".equals(partName)){
pid=Integer.parseInt(str);
}
if("urls".equals(partName)){
urls=str;
}
}else {
is=part.getInputStream();
productPicService.uploadPic(is);
}
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)