前端上传多个文件解析文件数据后将数据一起返回,用Blob前端生成文件
项目需求:文件合并,上传多个文件,解析后返回数据,在前端生成文件。
HTML:
<ul>
<li class="input-title" :class="index==0?'font-weight-900':''">{{item.title}}</li>
<li>
<div class="input-parent">
<input @change="showUploadChange(index)" ref="uploadInput" class="hidden-input" :multiple="index == 0?true:false" type="file">
<input ref="showUploadInput" v-model="item.show_input_value" class="show-input" type="text">
</div>
<span @click="uploadSubmit(index,item.url)" class="download-btn">确定</span>
</li>
</ul>
上传多个文件主要是依靠input的 multiple 属性,将multiple设置为true就可以上传多文件。
JS:
uploadSubmit(index,url){
//refs获取文件
let file = this.$refs.uploadInput[index].files
let formData = new FormData();
let _this = this;
if(this.data_list[index].show_input_value!==""){
for(let i=0;i<file.length;i++){
//将要提交的文件放到formData中
formData.append("file",file[i]);
}
let settings = {
url: this.baseUrl + url,
method: "POST",
processData: false,//这里要改成false,否则会出错。
mimeType: "multipart/form-data",
contentType: false,//这里要改成false,否则会出错。
data: formData
};
$.ajax(settings).done(function(response) {
let res = JSON.parse(response);
if(res.code == 1){
let data = res.data;
//创建Blob
let url = window.URL.createObjectURL(new Blob([data]))
// 创建a标签
let a = document.createElement('a')
//修改下载文件的名称
a.download =res.name + "." + res.type;
a.style.display = 'none'
a.href = url
document.body.appendChild(a)
a.click();
a.remove();
}else{
alert(res.msg);
}
});
}else{
alert("请选择文件!")
}
},
Java:
@RequestMapping("/url")
public JSONObject mergedDocument(HttpServletResponse response, HttpServletRequest request, @RequestParam("file") MultipartFile[] file){
JSONObject result = new JSONObject();
String str = "";//保存文件数据
String name = "";//文件名称
String type = "";//文件类型(TXT,SQL,Excel)
try {
for(MultipartFile f:file){
Map<String,String> map = analysisSqlRepository.resultCode(f);//这里用来判断文件编码格式,防止出现乱码,有需要的可以看我的另一篇博文。
name = f.getOriginalFilename().split("\\.")[0];
type = f.getOriginalFilename().split("\\.")[1];
String code = map.get("encoding");
//输入流
InputStream in = f.getInputStream();
BufferedReader reader = null;
if(code != null){
reader = new BufferedReader(new InputStreamReader(in,code));
}else{
reader = new BufferedReader(new InputStreamReader(in,"UTF-8"));
}
String line;
//按行读取文件数据
while ((line = reader.readLine()) != null){
str += line +"\r\n";
}
//关闭输入流
in.close();
}
//返回数据
result.put("code","1");
result.put("data",str);
result.put("name",name);
result.put("type",type);
result.put("msg","sucess!");
}catch (Exception e){
result.put("msg", "失败");
if (e instanceof MyException) {
result.put("msg", e.getMessage());
}
result.put("code", 0);
}
return result;
}
敲完收工。