使用 vue + element + FormData 来实现上传
效果图
前端我是用的是 vue作为js框架 element - ui做UI
后端是使用的FormData来接收的
这是前端
<el-upload
action="auto"
:http-request="uploadSectionFile"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="imgData.fileList"
class = "contentImgStyle">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img height="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<div class="contentImgTitle">
<span> 标题 </span>
<el-input
style="width: 16rem;"
placeholder="请输入标题"
v-model="thisTitle"
clearable>
</el-input>
</div>
var vm=new Vue({
el : '#contenVal',
data (){
return {
dialogImageUrl: '',
dialogVisible: false,
uploadFile : [],
thisTitle : '',
imgData : {
fileList : [{
name : "dape.png",
url : "http://syy-vr.com:8084/hyd.png"
}]
}
}
},
methods : {
uploadSectionFile (param) {
if(this.thisTitle == ''){
this.$message.error("请输入标题");
return;
}
var uploadFileLength = this.uploadFile.length;
let fileObj = param.file;
if (fileObj.type === "image/jpeg") {
let file = new File([fileObj], new Date().getTime() + ".jpg", {
type: "image/jpeg"
});
this.uploadFile[uploadFileLength]={ 'title' : this.thisTitle, 'imgFile' : file}
} else if (fileObj.type === "image/png") {
let file = new File([fileObj], new Date().getTime() + ".png", {
type: "image/png"
});
this.uploadFile[uploadFileLength]={ 'title' : this.thisTitle, 'imgFile' : file}
} else {
this.$message.error("只能上传jpg/png文件");
return;
}
},
upload() {
for (var int = 0; int < this.uploadFile.length; int++) {
var param = new FormData(); // FormData 对象
var list = this.uploadFile[int];
var file = list.imgFile;
var name = list.title;
param.append("uploadFile", file); // 文件对象
param.append("uploadTitle", name); // 其他参数
axios({
method: "post",
url: "http://127.0.0.1/SYY/serveClients/insertImg.action",
data: param
}).then(function name(data) {
console.log(data);
this.$message({
message: '上传成功',
type: 'success'
});
})
.catch(error => {
this.$message.error("上传失败,请稍后重试");
});
}
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
});
然后接下来是后端的
@RequestMapping(value="/insertImg",produces = "application/json;charset=UTF-8")
public void insertImg(HttpServletRequest request,HttpServletResponse response,
@RequestParam(value = "uploadFile", required = false) MultipartFile[] uploadFiles)
throws ServletException, IOException {
Map<String,Object> resultMap=new HashMap <String, Object>();
for(int i=0;i<uploadFiles.length;i++) {//支持上传多文件，所以使用循环
String fileName = uploadFiles[i].getOriginalFilename ();//获取文件上传的名称
String b=request.getParameter("uploadTitle");
try{
String uploadPath="E:\\img\\syy";//上传至服务器目录
File files=new File(uploadPath,fileName);
if(!files.exists ()){
files.mkdirs ();
}
uploadFiles[i].transferTo (files);
}catch (Exception e){
resultMap.put("uploadFlag",false);
}
}
/*response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
try {
response.getWriter().print(new String("测试"));
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}*/
}
以上是 使用 vue + element + FormData 来实现上传 的全部内容， 来源链接： utcz.com/z/376178.html
