四.minio前端获取签名地址直传minio⽂件服务器（前端直传）⽬录
1.概述开发软件工具安卓手机
1.1.需求
后端⽣成presigned url（预签名url，⾥⾯包含上传到AWS S3所需要的⼀些认证标识信息）给到前端，前端通过这个URL将⽂件上传到云服务上。
类似阿⾥云OSS的获取签名直传。
1.2.问题
上传成功后发现，上传的⽂件打不开。（上传对象为new Formdata(⽂件对象))
问题解释
⼀般图⽚、⽂件上传都是使⽤FormData对象传递⼆进制⽂件，但是上传完之后，下载后的图⽚⽆法打开，将其⼆进制数据与原⽂件⼆级制数进⾏对⽐，发现有额外的⼆进制数据
后来在github上到了解决⽅案，原来使FormData对象上传⽂件到上会损坏原⽂件的⼆进制数据，直接
上传⽂件对象就⾏
1.3问题解决
2.java⽣成签名地址，前端直接传
java⽣成地址
127.0.0.1:9090/product/1.png?response-content-type=application%2Fjson&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F2
public class PresignedPutObjectUrl {
public static void main(String[] args) {
try {
MinioClient minioClient = MinioClient.builder().endpoint("127.0.0.1:9090")
.credentials("admin", "12345678").build();
Map<String, String> reqParams = new HashMap<String, String>();
reqParams.put("response-content-type", "application/json");
String product = PresignedObjectUrl(
GetPresignedObjectUrlArgs.builder()
.method(Method.PUT) //这⾥必须是PUT，如果是GET的话就是⽂件访问地址了。如果是POST上传会报错.
.bucket("product")
.object("1.png")
.expiry(60 * 60 * 24)
.extraQueryParams(reqParams)
.build());
System.out.println(product); // 前端直传需要的url地址
} catch (Exception e) {
System.out.println("Error occurred: " + e);
}
}
}
html上传⽂件代码
<head lang="en">
<meta charset="UTF-8" />
<script src="cdn.bootcss/jquery/1.10.2/jquery.min.js"></script>
<title></title>windows11下载
</head>
<body>
<form id="uploadForm" >
姓名:<input id="name" type="text" name="name" /> <br /><br />
性别:<input id="sex" type="text" name="sex" /> <br /><br />
jquery下载文件请求⽂件:<input id="file" type="file" name="file" />
<input type="submit" value="提交 submit" />
</form>
</body>
<script type="text/javascript">
$(function () {
var putUrl = "127.0.0.1:9090/product/1.png?response-content-type=application%2Fjson&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ad //监听表单提交，变为异步提交表单
$("#uploadForm").on("submit", function (event) {
var form = this; //this代表的就是当前提交表单的DOM对象
//⽤H5的FormData对象对表单数据进⾏构造
console.log($('#file'))
console.log($('#file')[0].files[0])
$.ajax({
url: putUrl,
type: "put",
// data: $('#uploadForm')[0][2].files[0], //直接将⽂件对象传输
data: $('#file')[0].files[0], //直接将⽂件对象传输
dataType: "JSON",
async: true,
//要想⽤jquery的ajax来提交FormData数据,
/
/则必须要把这两项设为false
processData: false,
contentType: false,
error: function (xhr, status, error) {
alert("请求出错!");
},
success: function (result) {
alert("表单提交成功!");
},
});
//阻⽌表单的提交事件河南省副厅级干部调整
return false;
});
});
</script>
</html>
3.通过后端接⼝获取上传地址再上传
<head lang="en">
<meta charset="UTF-8" />
<script src="cdn.bootcss/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
⽂件: <input id="file" type="file" name="file" />
</form>
<button id="upload">上传⽂件</button>
</body>
<script type="text/javascript">
$(function() {
$("#upload").click(function() {
var getPresignedUrl =
"localhost:8080/xxx/minio/getPresignedUrl?bucketName=product&objectName="+$('#file')[0].files[0].name;
// todo 先获取上传的签名的url
$.ajax({
type: "get",
url: getPresignedUrl, //上传⽂件的请求路径必须是绝对路劲
data: {},
})
.success(function(response) {
console.log(response);
if (response.httpCode === 200) {
var uploadPutUrl = response.data;
// todo 通过签名的url上传⽂件
$.ajax({
type: "put",
url: uploadPutUrl, //上传⽂件的请求路径必须是绝对路劲
data: $('#file')[0].files[0], //直接上传⽂件对象
cache: false,
processData: false, //因为data值是FormData对象，不需要对数据做处理。
contentType: false, //因为是由<form>表单构造的FormData对象，所以这⾥设置为false。
})
.success(function(response) {
// success 即成功
console.log(response);
})
.error(function() {
// error 即失败
alert("上传失败");
webassembly go});
} else {
alert("失败");
}
})
.error(function() {
alert("失败");
});
});
});
</script>
</html>
4.axios+element
<el-upload
class="avatar-uploader"
action="123"
:http-request="upload"
:before-upload="beforeAvatarUpload">
<img v-if="params.defaultImgUrl" :src="params.defaultImgUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
upload(res)
{
let file = res.file; //注意：直接上传file⽂件，不要⽤FormData对象的形式传
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
//从接⼝获取presigned url
getUploadUrl({uploadType: 6}).then(res => {
let result = res.data;
if (de === 0) {
const info = JSON.parse(result.msg);
//需要⽤put⽅法上传，post会报405，aws官⽅规定是put⽅法
axios.put(info.presignedUrl, file, config)
.then(res => {
if (res.status == 200) {
this.params.defaultImgUrl = info.cdnUrl;
}
}).catch(
err => {
console.log(err)
}
)
}
}).catch(err => {
console.log('get upload info', err)
})
新闻ppt模板免费下载}
5.上传成功反馈
返回200状态码即表⽰上传成功
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论