HTML页面中
A:一个页面上传多个图片/文件
<div class="form-group">
<label class="col-sm-3 control-label">身份证正面照片:</label>
<div class="col-sm-8">
<input name="shopIdcardImgFile" class="form-control" type="file"
onchange="uploadFile('shopIdcardImgFile',5)">
<input id="shopIdcardImg" name="shopIdcardImg" class="form-control" type="hidden">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">身份证反面照片:</label>
<div class="col-sm-8">
<input name="shopIdcardBackimgFile" class="form-control" type="file"
onchange="uploadFile('shopIdcardBackimgFile',9)">
<input id="shopIdcardBackimg" name="shopIdcardBackimg" class="form-control" type="hidden">
</div>
</div>
B:一个页面上传一个图片/文件
<div class="form-group">
<label class="col-sm-3 control-label">上传安装包:</label>
<div class="col-sm-8">
<input name="url" class="form-control" type="file" onchange="uploadFile('url')">
<input id="url" name="url" class="form-control" type="hidden">
</div>
</div>
js中的方法:
单文件版:
function uploadFile(filePath) {
var formData = new FormData();
if ($("input[name='" + filePath + "']")[0].files[0] == null) {
$.modal.alertWarning("请先选择文件路径");
return false;
}
formData.append('file', $("input[name='" + filePath + "']")[0].files[0]);
$.ajax({
url: ctx + "module/versionInfo/uploadFile",
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function (result) {
$("#url").val(result.msg);
}
});
}
多文件版:
function uploadFile(filePath, flag) {
var formData = new FormData();
if ($("input[name='" + filePath + "']")[0].files[0] == null) {
$.modal.alertWarning("请先选择文件路径");
return false;
}
formData.append('file', $("input[name='" + filePath + "']")[0].files[0]);
$.ajax({
url: ctx + "module/shop/uploadImg",
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function (result) {
if (flag == "1") {
$("#shopUrl").val(result.msg);
} else if (flag == "2") {
$("#shopImg").val(result.msg);
} else if (flag == "3") {
$("#logoImg").val(result.msg);
}
}
});
}
ajax请求的方法:
@PostMapping(value = "/uploadImg")
@ResponseBody
public AjaxResult uploadImg(@RequestParam("file") MultipartFile file) {
// 上传图片
String str = UploadFileToOSSUtils.uploadBase64ImgByStream(file);
return success(str);
}
工具类中uploadBase64ImgByStream 方法的实现:
public static String uploadBase64ImgByStream(MultipartFile multipartFile) {
OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
try {
MultipartFile file = multipartFile;
String key = UUID.randomUUID().toString() + file.getOriginalFilename()+".png";
ossClient.putObject(bucketName, key, file.getInputStream());
OSSObject object = ossClient.getObject("zhuxing-public", key);
ossClient.shutdown();
String uri = object.getResponse().getUri();
if(uri.contains("http")){
uri = uri.replace("http","https");
}
return uri;
} catch (MalformedURLException e) {
logger.error(e.toString());
} catch (IOException e) {
logger.error(e.toString());
}
return null;
}