码迷,mamicode.com
首页 > Web开发 > 详细

JS里input文件的上传

时间:2019-08-23 13:21:01      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:代码   下标   选择   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;
}

 

JS里input文件的上传

标签:代码   下标   选择   url   val   mapping   upload   array   log   

原文地址:https://www.cnblogs.com/tank073/p/11399323.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!