js如何上传图片（前端如何用form-data方式上传图片js）

时间2025-05-02 06:50:19分类IT科技浏览4052

导读：1.场景工作场景中，需要一个上传图片的功能效果如下...

1.场景

工作场景中，需要一个上传图片的功能效果如下

PC端

mob端

2.业务逻辑

PC端和Mob端最多可以上传3张照片每张大小不超过3M 格式支持bmp,gif,jpg,png,jpeg PC端上传的图片会展示在添加图片按钮和上传图片文案描述中间 mob端默认是一个添加图片的图如果上传了图片会出现在添加图片这张图之前上传到第三张的时候添加图片这张图就隐藏掉了当前行显示3张正方形的上传图。 PC和Mob端每一个上传好的图上面都有一个x按钮点击x可以删除掉上传的图片并且这个块是封装成了组件组件复用在了查看详情页如果是查看详情进入这个组件我这里会传递进来一个resonDisabled 让input框隐藏掉只能查看当前内容不能点击上传代码里的:class="{ component-order-return-detail__apply-about-hidden: resonDisabled }"就是控制input隐藏的

3.前后端约定

form-data方式上传 key value格式上传这里的baseUrl就是接口的请求地址公共url 做了全局配置而已可以忽略这个截图主要看传参格式

4.css部分代码

css实现中先写了个父元素包含input和上面的上传图片按钮父元素 position:relative;子元素 position:absolute;input大小和上面的添加图片按钮大小一致然后设置了opacity: 0;并且input的z-index层级设置的高一点透明的浮在按钮之上

layout-mobile-only 是手机端的样式适配

layout-desktop 是PC端的样式适配

layout-responsive 是手机端和PC端分别是什么样式

如果需要写单端可以手动把这些代码分离出来

这里写的有点多哈大家可以不看这块只看js业务逻辑部分这里思路上面已经写出来了业务逻辑也不一定一致大家按照思路自己写就好

<div class="component-order-return-detail__apply-about-outer"> <div class="component-order-return-detail__apply-about-reason">图片信息</div> <div class="component-order-return-detail__apply-about-position layout-desktop-only"> <div class="component-order-return-detail__apply-about-upload">+ 添加图片</div> <input class="component-order-return-detail__apply-about-file component-order-return-detail__apply-about-upload" :class="{ component-order-return-detail__apply-about-hidden: resonDisabled }" type="file" multiple accept="image/png,image/jpeg,image/jpg,image/gif,image/bmp" @change="uploadApplyImage" /> </div> </div>  <div v-if="showUploadImage" class="component-order-return-detail__apply-about-static"> <div v-for="(item, index) of returnImageInfo" :key="index" class="component-order-return-detail__apply-about-static-outer"> <img class="component-order-return-detail__apply-about-img" :src="item.url" alt="" /> <svg-icon name="icon-delete-img" class="component-order-return-detail__delete-svg" @click="deleteImage"></svg-icon> </div> <img v-if="returnImageInfo.length < 3" class="component-order-return-detail__apply-about-img" :src="addMobileImage" alt="" /> </div> <style lang="scss"> $MQMobile: 1024px !default; @mixin layout-mobile-only { @media (max-width: calc(#{$MQMobile - 1px})) { @content; } } @mixin layout-desktop { @media (min-width: $MQMobile) { @content; } } // RESPONSIVE @mixin layout-responsive($property, $mobile: null, $desktop: null, $lage-desktop: null) { @if ($mobile) { @include layout-mobile { #{$property}: $mobile; } } @if ($desktop) { @include layout-desktop { #{$property}: $desktop; } } } .component-order-return-detail__apply-about-outer { width: 100%; @include layout-desktop { display: flex; align-items: center; } .block-input { @include layout-mobile-only { background-color: transparent !important; } } @include layout-responsive(margin-top, vw(24), 26px); .component-order-return-detail__apply-about-reason { @include layout-responsive(width, 100%, 100px); @include layout-mobile-only { margin-bottom: vw(6); } @include layout-desktop { margin-right: 49px; } } .component-order-return-detail__reason-red { color: red; } .component-order-return-detail__apply-about-input { color: #888; @include layout-responsive(font-size, vw(13), 13px); @include layout-responsive(width, 100%, 335px); @include layout-responsive(height, vw(36), 36px); .block-input { color: #888; } .is-black { border-color: #c0c0c0 !important; } } .component-order-return-detail__apply-about-textarea { box-sizing: border-box; color: #888; @include layout-responsive(width, 100%, 642px); @include layout-responsive(height, vw(100), 117px); @include layout-responsive(line-height, vw(20), 20px); @include layout-responsive(padding, vw(9) vw(5), 8px 11px); } .component-order-return-detail__apply-about-position { position: relative; width: 335px; height: 36px; .component-order-return-detail__apply-about-hidden { display: none !important; } .component-order-return-detail__apply-about-file { position: absolute; z-index: 9; opacity: 0; } .component-order-return-detail__apply-about-upload { @include layout-desktop { position: absolute; width: 335px; height: 36px; display: flex; align-items: center; justify-content: center; color: #888; font-size: 13px; border: 1px solid #c0c0c0; } } } } </style>

样式基本上就写好了

5.js部分代码

下面是js部分逻辑看起来内容有点多但是注释的很详细可以耐心看一下按需贴到自己代码中直接使用这里的axios是我单独自己写进去的原项目中是有封装的避免看起来麻烦改写了如果不小心有问题大家改一下哈

// 上传图片点击input的时候获取到图片信息 uploadApplyImage(e) { const files = e.target.files // 如果获取到了上传的内容才进行以下业务逻辑操作 if (files && files.length > 0) { // 如果上传多个图片或者文件对其进行循环对每个文件的格式都进行校验 for (let i = 0; i < files.length; i++) { const file = files[i] // 对支持上传的图片格式进行判断 if (!/\.(jpg|jpeg|png|bmp|gif|JPG|PNG|BMP|GIF)$/.test(file.name)) { this.$toast.show(请上传.png /.jpg /.jpeg格式的图片) } else if (file.size > 1024 * 1024 * 3) { // 弹出不满足上传格式的弹窗 this.$toast.show(单张图片不可以超过3M ，请重新上传) return } else { // 图片超过三张弹出提示 if (this.returnImageInfo.length === 3) { this.setToast(最多可上传3张图片) return } console.log(满足上传条件, file) // 转base64格式这里约定的格式是key value 直接传file就好就没用到转base64 // const reader = new FileReader() // // 因为这两个组件的fils文件不一样所有一个判断 // if (file?.originFileObj) { // reader.readAsDataURL(file.originFileObj) // } else { // reader.readAsDataURL(file) // } // reader.addEventListener(load, () => { // console.log(reader.result, reader.result) // }) // 转base64格式结束 // 上传图片 form-data方式进行参数序列化和后端约定的参数是uploadFile const formData = new FormData() formData.append(uploadFile, file) axios.post(/upload, formData, {headers: { Content-Type: application/form-data }}) .then(function (response) { // 上传成功执行对应操作 console.log(response); }) .catch(function (error) { // 上传失败执行对应操作 console.log(error); }); } } } }

好了就写到这里吧希望可以对你有帮助~ 如果大家有什么问题可以私信我或者我们评论区见