9.1 如何调用图片上传控件

登录

本帖最后由 Bruce86 于 2024-5-27 13:22 编辑

系统内置的【图片上传】控件很好用，上传速度非常快，一次性可以生成，原图，中图，小图。还带有压缩等功能；

我现在需要实现：点击按钮”上传文件“，
1 通过JS脚本，从本地缓存数据库 indexedDB中，获取到所有的Base64格式的图片资源；（已经实现）
2 逐个上传：将图片资源传递给内置的【图片上传】控件，上传图片到服务器，并获取上传后返回的文件名。
（卡在这里了：由于无法给控件赋值参数，卡住了。；
我用服务端命令实现过图片上传，但是太慢了，而且也没办法生成中图和小图。放弃了）。
请教各位大佬，第2步如何实现。

豪～豪 · 豪～豪

Bruce86 发表于 2024-5-27 15:25
官方更新了，也没有说明的，让我们抓瞎。

豪～豪 · 豪～豪

可以使用第三方软件，处理图片大小，然后图片批量重命名GID+文件名.jpg，然后手动上传到服务器

Bruce86 · Bruce86

豪～豪发表于 2024-5-27 08:59
可以使用第三方软件，处理图片大小，然后图片批量重命名GID+文件名.jpg，然后手动上传到服务器

这个就不符合使用需求了。

豪～豪 · 豪～豪

Bruce86 发表于 2024-5-27 09:22
这个就不符合使用需求了。

这个是需要获取到文件对象的不能直接传入参数

Bruce86 · Bruce86

豪～豪发表于 2024-5-27 09:51
这个是需要获取到文件对象的不能直接传入参数

这一块我已经实现了。

豪～豪 · 豪～豪

Bruce86 发表于 2024-5-27 10:24
这一块我已经实现了。

// 假设你有一个文件对象，例如通过<input type="file">获取
var fileInput = document.getElementById('myFileInput');
var file = fileInput.files[0]; // 获取选择的文件
// 创建一个FormData对象
var formData = new FormData();
// 将文件添加到FormData对象中
formData.append('file', file, file.name);
// 设置请求的headers，如果需要的话
var headers = {
'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryiNHGXYEXdedFStAl'
};
// 使用fetch发送POST请求
var appname = Forguncy.Helper.SpecialPath.getBaseUrl().replace(/\//g,'');//jgj
var urlname = document.location.origin;
var app = urlname + '/' + appname +'/FileDownloadUpload/UploadImage';
console.log(app);
fetch(app, {
method: 'POST',
body: formData,
// headers: headers, // 如果服务器需要特定的Content-Type，可以取消注释这一行
})
.then(response => {
// 检查响应状态
if (!response.ok) {
// 如果响应状态码不是2xx，抛出错误
throw new Error('Network response was not ok');
}
// 服务器返回的是text/plain类型的数据，使用.text()方法读取
return response.text();
})
.then(text => {
// 这里的text变量包含了服务器返回的文本数据
console.log('图片地址',text);
alert(text);
})
.catch((error) => {
console.error('Error:', error);
});

复制代码

Bruce86 · Bruce86

豪～豪发表于 2024-5-27 10:33

大佬原来你也是宁波这边的。我们同城奉化区的。我试试你的代码先。能否加一个V 交流一下。

Bruce86 · Bruce86

豪～豪发表于 2024-5-27 10:33

/Forguncy/FileDownloadUpload/UploadImage 这个地址是否无法使用呢。使用代码的时候一直报网络错误。

Bruce86 · Bruce86

豪～豪发表于 2024-5-27 10:33

大佬能否给一个简单的 demo

		自动登录	找回密码
密码			立即注册

[已处理] 9.1 如何调用图片上传控件

最佳答案

19 个回复

本帖子中包含更多资源

评分

时代开发者征文活动

活字格高级认证

悬赏达人

圣诞拼拼乐

活字格认证