使用form表单同时实现上传文件和提交文本数据,此示例中在后台将文件上传到阿里的oss存储服务器中
申请oss相关账号:
endpoint = "http://oss-cn-qingdao.aliyuncs.com";
accessKeyId = "key";
accessKeySecret = "secret";
bucketName = "空间名";
添加依赖:
<dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.3.0</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency>
编写OSS上传代码:
private OSS ossClient; /* * getOss * @description: 创建OSSClient实例 * @author 李阳 * @date 2018/12/12 * @params [] * @return void */ public void getOss() { this.ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); } /* * upload * @description:oss中上传文件,返回文件名 * @author 李阳 * @date 2018/12/12 * @params [request] * @return java.lang.String */ public String upload(HttpServletRequest request) throws IOException { String newFileName = null; try { //上传文件 CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext()); // 判断 request 是否有文件上传,即多部分请求 if (multipartResolver.isMultipart(request)) { // 转换成多部分request MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request; // 取得request中的所有文件名 Iterator<String> iter = multiRequest.getFileNames(); //此处上传单个文件,如需多个文件改为while循环 if (iter.hasNext()) { // 取得上传文件 MultipartFile file = multiRequest.getFile(iter.next()); if (file != null) { // 取得当前上传文件的文件名称 String myFileName = file.getOriginalFilename(); // 如果名称不为“”,说明该文件存在,否则说明该文件不存在 if (StringUtils.isNotEmpty(myFileName.trim())) { getOss(); newFileName = System.currentTimeMillis() + myFileName.substring(myFileName.lastIndexOf(".")); // 上传客户端文件到oss,如直接上传服务器文件到oss,可使用new FileInputStream( new File("服务器文件路径")) ossClient.putObject(bucketName, newFileName, file.getInputStream()); } } } } } catch (IOException e) { logger.error(e.getMessage(), e); } finally { // 关闭ossClient if (null != ossClient) ossClient.shutdown(); } return newFileName; } //删除 // ossClient.deleteObject(bucketName, oldName);
api接口:
@RequestMapping(value = "/kevin/upload", method = RequestMethod.POST) public void upload(CustomObject params, HttpServletRequest request) { try { String fileName = upload(request); // todo:使用params和filename实现服务端业务 } catch (Exception e) { logger.error(e.getMessage(), e); } }
前端:
<form id="form0"> <label>上传图片</label> <input type="file" name="img"> </br> </br> <label>宽高比例</label> <input type="text" name="ratio"/> </br> </br> <button type="button" id="submit">提交</button> </form> <script> //获得整个form var form = new FormData(document.getElementById("form0")); //form追加提交的数据 form.append("token", token); $.ajax({ url: "/kevin/upload", type: 'POST', data: form, contentType: false, //不指定提交数据类型 processData: false, //提交数据不做处理 success: function (returndata) { console.log(returndata); var result = JSON.parse(returndata); // 判断逻辑 } }); </script>
效果图:
申请账号地址:
https://help.aliyun.com/document_detail/32008.html?spm=a2c4g.11186623.6.708.7dbcc06dPWVcv7
https://help.aliyun.com/document_detail/32011.html?spm=a2c4g.11186623.6.710.70a56328AynJIs