前端图片上传思路记录

Posted merrys

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端图片上传思路记录相关的知识,希望对你有一定的参考价值。

需求:可一次上传多张,多次上传;可单张删除;可小图预览;使用七牛云存储图片;非必传;提交表单表单后可重新编辑;

平台:pc,兼容方面主要考虑谷歌浏览器;

思路:1.准备好页面结构input[type]=file mutipul 和 input[type=hidden]

   2.用户每次选取图片后

    2.1用户点击input但没有选取图片,无论是否触发change事件,无操作;

    2.2用户点击input但选取图片和上一张相同,不触发change事件,无操作;

    2.3用户点击input选取图片并排除以上两种情况后,准备formData空对象,获取files并遍历append进formData的files中(files是我们公司前后台自定的),请求上传七牛云,获取路径;

    2.4请求成功(statas=success),提醒上传成功,处理返回的图片路径字符串来显示图片(并每张图附带一个删除标志),将图片路径处理成数组放入input[type=hidden];请求失败,提示上传失败,请重试;

     3.用户点击删除标志,删除当前单张图片,并将当前路径从input[type=hidden]的值中剔除;

     4.点击提交表单,请求后台,隐藏删除标志;

     5.用户重新编辑,显示删除标志,重复步骤三;

     6.用户再次提交表单。重复步骤四;

哪里考虑不周全请指出,感谢!

以上是关于前端图片上传思路记录的主要内容,如果未能解决你的问题,请参考以下文章

工作笔记---巡检记录

nodejs关于前后端图片上传的思路及实现代码

nodejs关于前后端图片上传的思路及实现代码

uniapp上传图片至服务器,获得在线图片链接预览(实战)

SpringBoot+Vue+token实现(表单+图片)上传图片地址保存到数据库。上传图片保存位置自己定义图片可以在前端回显)

前端预览图片和H5canvas压缩图片上传