如何解决图片和商品属性传递给后端的问题?

在网站开发过程中遭遇整合图片与商品信息的难题?感到焦虑?本文旨在解析这一挑战,并介绍高效传输数据至后端、保持前端美观展示的方法。

1.图片和商品信息,谁先飞?

在进行图片与商品信息的处理顺序选择时,类比于先尝甜点还是先享主菜的抉择。若先处理图片,后端将先存储并返回图片地址,随后合并商品信息及链接一同传输。此策略之优点在于后端能专注于图片处理,降低干扰。

若同步图片与商品详情,务必保证后端支持并行数据处理。这一过程犹如精心烹饪,须精确调控各步骤,避免操作失误。但此方法优点显著,前端仅需一次请求即传悉信息,大幅节约了时间与精力。

2.图片请求头,怎么设置?

即将展开关于图片请求头配置的讨论,此举相当于为图像穿上恰当的“外衣”,保障其顺畅穿越网络。通常,我们选用`multipart/form-data`格式,向网络发送信号:“此处存在图像,请仔细处理。”

在`axios`应用中,务必在请求头部注明`Content-Type:multipart/form-data`。此操作相当于为图片信息打上标签,提示后端“此处为图片数据,请相应处理”。若已对`axios`进行封装,配置步骤可能有所不同,但基本原理保持不变。

3.数据库里,图片怎么存?

当前面临选择,即如何于数据库中保存图片。此决策等同于挑选隐藏宝物之所。直接保存图片将导致数据库体积膨胀,犹如家中杂乱无章。普遍做法是仅保存图片的引用链接。这相当于室内摆放一张指向宝物位置的地图。

图片[1]-如何解决图片和商品属性传递给后端的问题?-东山笔记

通过存储图片访问链接,能够显著减轻数据库压力,并实现图片的高效管理及便捷访问。此策略类比于家中悬挂地图,即刻可找到宝藏,避免了逐项搜寻的累赘。

     <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);          }        });      }    },

在为婴儿挑选名字时,应重视其悦耳与易记的特点,以避免因命名不当而难觅重要物品。

图片[2]-如何解决图片和商品属性传递给后端的问题?-东山笔记

   /**     * 文件上传     */    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 */@RestControllerpublic 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 */@RestControllerpublic 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 { 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.图片访问不到,怎么办?

若图片的访问路径包含中文字符,可能导致资源访问障碍,类似在家中摆放模糊地图的情况。可通过设置过滤器及指定编码方式,保障对路径中的中文字符准确识别。

此状况恰似在家张贴地图,务必确保图上文字易于辨认,否则探寻宝藏将变得艰巨。

© 版权声明
THE END
喜欢就支持一下吧
分享