使用form表單同時實現上傳檔案和提交文字資料,此示例中在後臺將檔案上傳到阿里的oss儲存伺服器中

申請oss相關賬號：
endpoint = "http://oss-cn-qingdao.aliyuncs.com";
accessKeyId = "key";
accessKeySecret = "secret";
bucketName = "空間名";

新增依賴：

<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