标签:代码 下标 选择 url val mapping upload array log
二、Input 文件上传
1、前端代码:
---HTMl
<button v-if="item.egis == 2" class="btn btn-wide btn-darker-1" @click="toUpload(index)">上传</button> <!-- <button v-if="item.egis == 2" class="btn btn-wide btn-darker-1" onclick="toUpload(index)">上传</button> --> <!--可以让大家共同调用,没必要每条记录里都加个上传按钮--> <input id="file" type="file" name="file" onchange="chooseFile(this);" placeholder="上传附件" autocomplete="off" style="display: none">
---JS var page = new Vue( el: "#page", data: {...}, method:{ // 因为想引用这个下标,所以使用了Vue语法 @click,需要注意的是这样使用的时候不能通过jQuery的${this}获取到当前元素 // 如果想获取到当前元素,可以使用原生的onclick()方法,但是此种情况下不能再使用vue里的index下标,并且toUpload()方法要定义到Vue外部 toUpload(index) { $("#file").trigger("click"); }, }, ) // 模拟input的单击事件选择文件 function chooseFile(i){ let oMyForm = new FormData(); oMyForm.append("file", i.files[0]); $.ajax({ url: ‘/upload/salaryFile‘, type: ‘POST‘, cache: false, data: oMyForm, processData: false, contentType: false, async: false }).done(function(res) { page.fileUrl = res; }).fail(function(res) { console.log("文件上传失败") }); };
2、后台代码(上传阿里云OSS):
@RequestMapping(value = "/salaryFile")
@ResponseBody
public ResultModel addSalaryFile(MultipartFile[] file) {
String fileName = "";
if(EmptyUtils.isNotEmpty(file)){
byte[] bytes =null;
try {
String name=file[0].getOriginalFilename();
String format = name.substring(name.indexOf(".")+1);
bytes=file[0].getBytes();
String fileName_last = OssUtil.uploadByte(bytes, OssConstant.PUBLIC_BUCKET, OssConstant.Salary,format);
fileName = PREFIX + OssConstant.Salary+ "/" + fileName_last;
} catch (IOException e) {
e.printStackTrace();
}
}
return result(fileName);
}
public static String uploadByte(byte[] content,String bucket,String folderName,String format){
OSSClient ossClient = getOSSClient();
String fileName = generateName() +"."+ format;
ossClient.putObject(bucket,getObjectName(folderName, fileName), new ByteArrayInputStream(content));
ossClient.shutdown();
return fileName;
}
标签:代码 下标 选择 url val mapping upload array log
原文地址:https://www.cnblogs.com/tank073/p/11399323.html