怎么在前端修改发给后端图片的名称代码实现
时间: 2024-03-06 14:46:53 浏览: 151
以下是一个修改上传图片文件名的示例代码,基于前面提到的步骤实现:
```javascript
// 获取上传的图片文件对象
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
// 获取原始文件名
const originalName = file.name;
// 修改文件名
const newName = 'newName.jpg'; // 假设要修改为 newname.jpg
const newFileName = originalName.replace(/[^\.]+/, newName);
// 创建新的文件对象
const newFile = new File([file], newFileName, { type: file.type });
// 将新的文件对象上传到后端服务器
const formData = new FormData();
formData.append('file', newFile);
// 发送请求到后端
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => {
// 处理响应结果
})
.catch(error => {
// 处理错误
});
```
这段代码首先获取上传的图片文件对象,然后获取原始文件名,接着使用正则表达式将原始文件名中的文件扩展名替换为新的文件名,生成新的文件名。然后,使用`File`构造函数创建一个新的文件对象,并将修改后的文件名和原始文件对象传入。最后,将新的文件对象添加到`FormData`对象中,并发送请求到后端服务器。
阅读全文