如何上传照片

使⽤Vue实现图⽚上传的三种⽅式

项⽬中需要上传图⽚可谓是经常遇到的需求，本⽂将介绍3种不同的图⽚上传⽅式，在这总结分享⼀下，有什么建议或者意

见，请⼤家踊跃提出来。

没有业务场景的功能都是耍流氓，那么我们先来模拟⼀个需要实现的业务场景。假设我们要做⼀个后台系统添加商品的页⾯，

有⼀些商品名称、信息等字段，还有需要上传商品轮播图的需求。

我们就以Vue、Element-ui，封装组件为例⼦聊聊如何实现这个功能。其他框架或者不⽤框架实现的思路都差不多，本⽂主要

聊聊实现思路。

1.云储存

常见的七⽜云，OSS（阿⾥云）等，这些云平台提供API接⼝，调⽤相应的接⼝，⽂件上传后会返回图⽚存储在服务器上的路

径，前端获得这个路径保存下来提交给后端即可。此流程处理相对简单。

主要步骤

1.向后端发送请求，获取OSS配置数据

2.⽂件上传，调⽤OSS提供接⼝

3.⽂件上传完成，后的⽂件存储在服务器上的路径

4.将返回的路径存值到表单对象中

代码范例

我们以阿⾥的OSS服务来实现，们试着来封装⼀个OSS的图⽚上传组件。

通过element-ui的upLoad组件的http-request参数来⾃定义我们的⽂件上传，仅仅使⽤他组件的样式，和其他上传前的相关钩

⼦（控制图⽚⼤⼩，上传数量限制等）。

传统⽂件服务器上传图⽚

此⽅法就是上传到⾃⼰⽂件服务器硬盘上，或者云主机的硬盘上，都是通过formdata的⽅式进⾏⽂件上传。具体的思路和云

⽂件服务器差不多。

主要步骤

1.设置服务器上传路径、上传⽂件字段名、header、data参数等

2.上传成功后，返回服务器存储的路径

3.返回的图⽚路径存储到表单提交对象中

代码⽰例

此种图⽚上传根据element-ui的upLoad组件只要传⼊后端约定的相关字段即可实现，若使⽤元素js也是⽣成formdata对象，通

过Ajax去实现上传也是类似的。

这⾥只做⼀个简单的⽰例，具体请看el-upload组件相⽂档就能实现

图⽚转ba64后上传

有时候做⼀些私活项⽬，或者⼀些⼩图⽚上传可能会采取前端转ba64后成为字符串上传。当我们有这⼀个需求，有⼀个商

品轮播图多张，转ba64编码后去掉data:image/jpeg;ba64,将字符串以逗号的形势拼接，传给后端。我们如何来实现呢。

1.本地⽂件如何转成ba64

我们通过H5新特性readAsDataURL可以将⽂件转ba64格式，轮播图有多张，可以在点击后⽴马转ba64也可，我是在提

交整个表单钱⼀次进⾏转码加⼯。

具体步骤

1.新建⽂件封装异步转ba64的⽅法

2.添加商品的时候选择本地⽂件，选中⽤对象保存整个file对象

3.最后提交整个商品表单之前进⾏编码处理

在这⾥要注意⼀下，因为readAsDataURL操作是异步的，我们如何将存在数组中的若⼲的file对象，进⾏编码，并且按照上

传的顺序，把编码后端图⽚ba64字符串储存在⼀个新数组内呢，⾸先想到的是promi的链式调⽤，可是不能并发进⾏转

码，有点浪费时间。我们可以通过循环async函数进⾏并发，并且排列顺序。请看methods的submitData⽅法

exportfunctionuploadImgToBa64(file){

returnnewPromi((resolve,reject)=>{

constreader=newFileReader()

DataURL(file)

=function(){//图⽚转ba64完成后返回reader对象

resolve(reader)

}

r=reject

})

}

添加商品页⾯部分代码

这样本地图⽚上传的时候转ba64上传就完成了。可是轮播图有可以进⾏编辑，我们该如何处理呢？⼀般来说商品增加页⾯

和修改页⾯可以公⽤⼀个组件，那么我们继续在这个页⾯上修改。

2.在线图⽚转ba64

具体步骤

⽂件添加在线图⽚转ba64的⽅法，利⽤canvas

编辑商品，先拉取原来的商品信息展⽰到页⾯

提交表单之前，区分在线图⽚还是本地图⽚进⾏转码

exportfunctionuploadImgToBa64(file){

returnnewPromi((resolve,reject)=>{

functiongetBa64Image(img){

constcanvas=Element('canvas')

=

=

constctx=text('2d')

age(img,0,0,,)

vardataURL=URL()

returndataURL

}

constimage=newImage()

rigin='*'//允许跨域图⽚

=img+'?v='+()//清除图⽚缓存

(img)

=function(){

resolve(getBa64Image(image))

}

r=reject

})

}

添加商品页⾯部分代码

结语

⾄此常⽤的三种图⽚上传⽅式就介绍完了，转ba64⽅式⼀般在⼩型项⽬中使⽤，⼤⽂件上传还是传统的formdata或者云服

务，更合适。但是通过转ba64⽅式也使得，在前端进⾏图⽚编辑成为了可能，不需要上传到服务器就能预览。主要收获还

是对于异步操作的处理。

总结

以上所述是⼩编给⼤家介绍的使⽤Vue实现图⽚上传的三种⽅式，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩

编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！