在网站开发过程中遭遇整合图片与商品信息的难题?感到焦虑?本文旨在解析这一挑战,并介绍高效传输数据至后端、保持前端美观展示的方法。
1.图片和商品信息,谁先飞?
在进行图片与商品信息的处理顺序选择时,类比于先尝甜点还是先享主菜的抉择。若先处理图片,后端将先存储并返回图片地址,随后合并商品信息及链接一同传输。此策略之优点在于后端能专注于图片处理,降低干扰。
若同步图片与商品详情,务必保证后端支持并行数据处理。这一过程犹如精心烹饪,须精确调控各步骤,避免操作失误。但此方法优点显著,前端仅需一次请求即传悉信息,大幅节约了时间与精力。
2.图片请求头,怎么设置?
即将展开关于图片请求头配置的讨论,此举相当于为图像穿上恰当的“外衣”,保障其顺畅穿越网络。通常,我们选用`multipart/form-data`格式,向网络发送信号:“此处存在图像,请仔细处理。”
在`axios`应用中,务必在请求头部注明`Content-Type:multipart/form-data`。此操作相当于为图片信息打上标签,提示后端“此处为图片数据,请相应处理”。若已对`axios`进行封装,配置步骤可能有所不同,但基本原理保持不变。
3.数据库里,图片怎么存?
当前面临选择,即如何于数据库中保存图片。此决策等同于挑选隐藏宝物之所。直接保存图片将导致数据库体积膨胀,犹如家中杂乱无章。普遍做法是仅保存图片的引用链接。这相当于室内摆放一张指向宝物位置的地图。
通过存储图片访问链接,能够显著减轻数据库压力,并实现图片的高效管理及便捷访问。此策略类比于家中悬挂地图,即刻可找到宝藏,避免了逐项搜寻的累赘。
<input
@change="upload"
@click="clearFile"
multiple="multiple"
type="file"
ref="file"
/>
4.图片名称,要不要处理?
在图片命名过程中,务必确保名称无任何歧义,犹如对稀有物品进行命名。需禁用特殊符号及中文,以免造成访问问题。建议在保存图片时,对名称进行优化,清除特殊符号或遵循规范格式。
//文件上传
upload: function () {
let files = this.$refs.file.files;
const _this = this;
for (let i = 0; i < files.length; i++) {
let formData = new FormData();
formData.append("file", files[i]);
this.$axios.uploadFile(formData).then((res) => {
if (res.code == 200) {
_this.$message("文件上传成功");
console.log(res.data.fileName);
this.GoodsInfoForm.fileName = res.data.fileName;
console.log(this.GoodsInfoForm.fileName);
} else {
_this.$message("error", res.data.msg);
}
});
}
},
在为婴儿挑选名字时,应重视其悦耳与易记的特点,以避免因命名不当而难觅重要物品。
/**
* 文件上传
*/
uploadFile: (params) => {
return Post('http://localhost:8282/goodsInfo/upload', params);
}
5.图片存到哪里?
const instance = axios.create({
baseURL: 'http://localhost:8282',
timeout: 3000,
headers: {
post: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' ,
'Content-Type': 'multipart/form-data'
}
}
})
目前,须选定图片存储点。该决策可比拟于选择家庭保险柜或银行保管箱。选项包括将图片存入项目静态资源文件夹,以便高效检索。这类似于家中设置专用于存取的储存柜。
cn.hutool
hutool-all
5.3.7
当然,您可选择将图片存放在包括云存储在内的多样位置。此操作类比于在银行开设一个保险柜,虽存取略显不便,但其安全性更高。
import cn.hutool.core.io.FileUtil;//需要引入这个、引入不对、无法使用对应的方法
/**
* @author Lenovo
* @version 1.0
* @data 2022/10/11 21:32
*/
@RestController
public class GoodsfileInfoController {
@Autowired
GoodsFileInfoMapper gfMapper;
private static final String ABSOLUTE_FILE_PATH = "E:\Lenovo\Documents\upload\images\";
/**
* 文件上传 绝对
* @param file
* @return
*/
@RequestMapping(value = "/goodsInfo/upload",method = RequestMethod.POST)
public Result upload(MultipartFile file, HttpServletRequest request) throws IOException {
String originName = file.getOriginalFilename();
// 1、文件名加个时间戳
String fileName = FileUtil.mainName(originName) + System.currentTimeMillis() + "." + FileUtil.extName(originName);
// 2、文件存放的绝对路径 存放名称
String storageName = ABSOLUTE_FILE_PATH + fileName;
// 3. 文件上传
FileUtil.writeBytes(file.getBytes(),storageName );
String final_fileName ="http://localhost:8282/images/" + fileName;
return Result.ok().data("fileName",final_fileName);
}
}
6.图片资源,会不会被拦截?
/**
* @author Lenovo
* @version 1.0
* @data 2022/10/11 21:32
*/
public class GoodsfileInfoController {
GoodsFileInfoMapper gfMapper;
private static final String ABSOLUTE_FILE_PATH = "E:\Lenovo\Documents\upload\images\";
/**
* 文件上传 绝对
* @param file
* @return
*/
public Result upload(MultipartFile file, HttpServletRequest request) throws IOException {
System.out.println(System.getProperty("user.dir"));
String originName = file.getOriginalFilename();
// 1、文件名加个时间戳
String fileName = FileUtil.mainName(originName) + System.currentTimeMillis() + "." + FileUtil.extName(originName);
System.out.println(fileName);
// 2、文件存放的绝对路径 存放名称
String storageName = ABSOLUTE_FILE_PATH + fileName;
// 3. 文件上传
File dest = new File(storageName);
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);
} catch (IOException e) {
e.printStackTrace();
}
String final_fileName ="http://localhost:8282/images/" + fileName;
return Result.ok().data("fileName",final_fileName);
}
}
确保`token`验证过程中不限制图片资源。类比家庭监控安装,需避免误报。于`token`验证配置中,需明确授权图片资源通行,确保图像传输顺畅。
这等于是在家中安装监控设备,必须确保其精准辨别能力,避免错将无辜者判定为不法者。
7.图片访问不到,怎么办?
若图片的访问路径包含中文字符,可能导致资源访问障碍,类似在家中摆放模糊地图的情况。可通过设置过滤器及指定编码方式,保障对路径中的中文字符准确识别。
此状况恰似在家张贴地图,务必确保图上文字易于辨认,否则探寻宝藏将变得艰巨。