使用form表单同时实现上传文件和提交文本数据

2019独角兽企业重金招聘Python工程师标准>>>

使用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

 

转载于:https://my.oschina.net/kevin2kelly/blog/2987447