JS里input文件的上传

Posted 2022-08-16 tank073

二、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;