当前位置：首页 > 建站教程 >

使用Vue实现图片上传的三种方式(JavaScript实现图片上传到服务器和回显)

GG网络技术分享 2025-03-18 16:13 0

使用Vue实现图片上传的三种方式

项目中需要上传图片可谓是经常遇到的需求，本文将介绍 3 种不同的图片上传方式，在这总结分享一下，有什么建议或者意见，请大家踊跃提出来。

没有业务场景的功能都是耍流氓，那么我们先来模拟一个需要实现的业务场景。假设我们要做一个后台系统添加商品的页面，有一些商品名称、信息等字段，还有需要上传商品轮播图的需求。

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

1.云储存

常见的七牛云，OSS（阿里云）等，这些云平台提供API接口，调用相应的接口，文件上传后会返回图片存储在服务器上的路径，前端获得这个路径保存下来提交给后端即可。此流程处理相对简单。

主要步骤

向后端发送请求，获取OSS配置数据
文件上传，调用OSS提供接口
文件上传完成，后的文件存储在服务器上的路径
将返回的路径存值到表单对象中

代码范例

我们以阿里的 OSS 服务来实现，们试着来封装一个OSS的图片上传组件。

通过element-ui的upLoad组件的 http-request 参数来自定义我们的文件上传，仅仅使用他组件的样式，和其他上传前的相关钩子（控制图片大小，上传数量限制等）。

<el-upload

list-type=\"picture-card\"

action=\"\'\'\"

:http-request=\"upload\"

:before-upload=\"beforeAvatarUpload\">

</el-upload>

</template>

import {getAliOSSCreds} from \'@/api/common\' // 向后端获取 OSS秘钥信息

import {createId} from \'@/utils\' // 一个生产唯一的id的方法

import OSS from \'ali-oss\'

export default {

data () {

return {}

methods: {

// 图片上传前验证

beforeAvatarUpload (file) {

const isLt2M = file.size / 1024 / 1024 < 2

if (!isLt2M) {

this.$message.error(\'上传头像图片大小不能超过 2MB!\')

}

return isLt2M

// 上传图片到OSS 同时派发一个事件给父组件监听

upload (item) {

getAliOSSCreds().then(res => { // 向后台发请求拉取OSS相关配置

let creds = res.body.data

let client = new OSS.Wrapper({

region: \'oss-cn-beijing\', // 服务器集群地区

accessKeyId: creds.accessKeyId, // OSS帐号

accessKeySecret: creds.accessKeySecret, // OSS 密码

stsToken: creds.securityToken, // 签名token

bucket: \'imgXXXX\' // 阿里云上存储的 Bucket

})

let key = \'resource/\' + localStorage.userId + \'/images/\' + createId() + \'.jpg\' // 存储路径，并且给图片改成唯一名字

return client.put(key, item.file) // OSS上传

}).then(res => {

console.log(res.url)

this.$emit(\'on-success\', res.url) // 返回图片的存储路径

}).catch(err => {

console.log(err)

})

}

</script>

传统文件服务器上传图片

此方法就是上传到自己文件服务器硬盘上，或者云主机的硬盘上，都是通过 formdata 的方式进行文件上传。具体的思路和云文件服务器差不多。

主要步骤

设置服务器上传路径、上传文件字段名、header、data参数等
上传成功后，返回服务器存储的路径
返回的图片路径存储到表单提交对象中

代码示例

此种图片上传根据element-ui的upLoad组件只要传入后端约定的相关字段即可实现，若使用元素js也是生成formdata对象，通过Ajax去实现上传也是类似的。

这里只做一个简单的示例，具体请看el-upload组件相文档就能实现

<el-upload

ref=\"imgUpload\"

:on-success=\"imgSuccess\"

:on-remove=\"imgRemove\"

accept=\"image/gif,image/jpeg,image/jpg,image/png,image/svg\"

:headers=\"headerMsg\"

:action=\"upLoadUrl\"

multiple>

<el-button type=\"primary\">上传图片</el-button>

</el-upload>

</template>

import {getAliOSSCreds} from \'@/api/common\' // 向后端获取 OSS秘钥信息

import {createId} from \'@/utils\' // 一个生产唯一的id的方法

import OSS from \'ali-oss\'

export default {

data () {

return {

headerMsg:{Token:\'XXXXXX\'},

upLoadUrl:\'xxxxxxxxxx\'

}

methods: {

// 上传图片成功

imgSuccess (res, file, fileList) {

console.log(res)

console.log(file)

console.log(fileList) // 这里可以获得上传成功的相关信息

}

</script>

图片转 base64 后上传

有时候做一些私活项目，或者一些小图片上传可能会采取前端转base64后成为字符串上传。当我们有这一个需求，有一个商品轮播图多张，转base64编码后去掉data:image/jpeg;base64,将字符串以逗号的形势拼接，传给后端。我们如何来实现呢。

1.本地文件如何转成 base64

我们通过H5新特性 readAsDataURL 可以将文件转base64格式，轮播图有多张，可以在点击后立马转base64也可，我是在提交整个表单钱一次进行转码加工。

具体步骤

新建文件封装异步转base64的方法
添加商品的时候选择本地文件，选中用对象保存整个file对象
最后提交整个商品表单之前进行编码处理

在这里要注意一下，因为 readAsDataURL 操作是异步的，我们如何将存在数组中的若干的 file对象，进行编码，并且按照上传的顺序，把编码后端图片base64字符串储存在一个新数组内呢，首先想到的是promise的链式调用，可是不能并发进行转码，有点浪费时间。我们可以通过循环 async 函数进行并发，并且排列顺序。请看 methods 的 submitData 方法

utils.js

export function uploadImgToBase64 (file) {

return new Promise((resolve, reject) => {

const reader = new FileReader()

reader.readAsDataURL(file)

reader.onload = function () { // 图片转base64完成后返回reader对象

resolve(reader)

}

reader.onerror = reject

})

}

添加商品页面部分代码

<div>

<el-upload

ref=\"imgBroadcastUpload\"

:auto-upload=\"false\" multiple

:file-list=\"diaLogForm.imgBroadcastList\"

list-type=\"picture-card\"

:on-change=\"imgBroadcastChange\"

:on-remove=\"imgBroadcastRemove\"

accept=\"image/jpg,image/png,image/jpeg\"

action=\"\">

<div slot=\"tip\" class=\"el-upload__tip\">只能上传jpg/png文件，且不超过2M</div>

</el-upload>

<el-button>submitData</el-button>

</div>

</template>

import { uploadImgToBase64 } from \'@/utils\' // 导入本地图片转base64的方法

export default {

data () {

return {

diaLogForm: {

goodsName:\'\', // 商品名称字段

imgBroadcastList:[], // 储存选中的图片列表

imgsStr:\'\' // 后端需要的多张图base64字符串 , 分割

}

methods: {

// 图片选择后保存在 diaLogForm.imgBroadcastList 对象中

imgBroadcastChange (file, fileList) {

const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB

if (!isLt2M) {

this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)

this.$message.error(\'图片选择失败，每张图片大小不能超过 2MB,请重新选择!\')

} else {

this.diaLogForm.imgBroadcastList.push(file)

}

// 有图片移除后触发

imgBroadcastRemove (file, fileList) {

this.diaLogForm.imgBroadcastList = fileList

// 提交弹窗数据

async submitDialogData () {

const imgBroadcastListBase64 = []

console.log(\'图片转base64开始...\')

// 并发转码轮播图片list => base64

const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {

const response = await uploadImgToBase64(file.raw)

return response.result.replace(/.*;base64,/, \'\') // 去掉data:image/jpeg;base64,

})

// 按次序输出 base64图片

for (const textPromise of filePromises) {

imgBroadcastListBase64.push(await textPromise)

}

console.log(\'图片转base64结束..., \', imgBroadcastListBase64)

this.diaLogForm.imgsStr = imgBroadcastListBase64.join()

console.log(this.diaLogForm)

const res = await addCommodity(this.diaLogForm) // 发请求提交表单

if (res.status) {

this.$message.success(\'添加商品成功\')

// 一般提交成功后后端会处理，在需要展示商品地方会返回一个图片路径

}

</script>

这样本地图片上传的时候转base64上传就完成了。可是轮播图有可以进行编辑，我们该如何处理呢？一般来说商品增加页面和修改页面可以公用一个组件，那么我们继续在这个页面上修改。

编辑时我们首先会拉取商品原有数据，进行展示，在进行修改，这时候服务器返回的图片是一个路径 http://xxx.xxx.xxx/abc.jpg 这样，当我们新增一张图片的还是和上面的方法一样转码即可。可是后端说，没有修改的图片也要赚base64转过来，好吧那就做把。这是一个在线链接图片，不是本地图片，怎么做呢？

2. 在线图片转base64

具体步骤

utils.js 文件添加在线图片转base64的方法，利用canvas

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

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

utils.js

export function uploadImgToBase64 (file) {

return new Promise((resolve, reject) => {

function getBase64Image (img) {

const canvas = document.createElement(\'canvas\')

canvas.width = img.width

canvas.height = img.height

const ctx = canvas.getContext(\'2d\')

ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

var dataURL = canvas.toDataURL()

return dataURL

}

const image = new Image()

image.crossOrigin = \'*\' // 允许跨域图片

image.src = img + \'?v=\' + Math.random() // 清除图片缓存

console.log(img)

image.onload = function () {

resolve(getBase64Image(image))

}

image.onerror = reject

})

}

添加商品页面部分代码

<div>

<el-upload

ref=\"imgBroadcastUpload\"

:auto-upload=\"false\" multiple

:file-list=\"diaLogForm.imgBroadcastList\"

list-type=\"picture-card\"

:on-change=\"imgBroadcastChange\"

:on-remove=\"imgBroadcastRemove\"

accept=\"image/jpg,image/png,image/jpeg\"

action=\"\">

<div slot=\"tip\" class=\"el-upload__tip\">只能上传jpg/png文件，且不超过2M</div>

</el-upload>

<el-button>submitData</el-button>

</div>

</template>

import { uploadImgToBase64, URLImgToBase64 } from \'@/utils\'

export default {

data () {

return {

diaLogForm: {

goodsName:\'\', // 商品名称字段

imgBroadcastList:[], // 储存选中的图片列表

imgsStr:\'\' // 后端需要的多张图base64字符串 , 分割

}

created(){

this.getGoodsData()

methods: {

// 图片选择后保存在 diaLogForm.imgBroadcastList 对象中

imgBroadcastChange (file, fileList) {

const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB

if (!isLt2M) {

this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)

this.$message.error(\'图片选择失败，每张图片大小不能超过 2MB,请重新选择!\')

} else {

this.diaLogForm.imgBroadcastList.push(file)

}

// 有图片移除后触发

imgBroadcastRemove (file, fileList) {

this.diaLogForm.imgBroadcastList = fileList

// 获取商品原有信息

getGoodsData () {

getCommodityById({ cid: this.diaLogForm.id }).then(res => {

if (res.status) {

Object.assign(this.diaLogForm, res.data)

// 把 \'1.jpg,2.jpg,3.jpg\' 转成[{url:\'http://xxx.xxx.xx/j.jpg\',...}] 这种格式在upload组件内展示。 imgBroadcastList 展示原有的图片

this.diaLogForm.imgBroadcastList = this.diaLogForm.imgsStr.split(\',\').map(v => ({ url: this.BASE_URL + \'/\' + v }))

}

}).catch(err => {

console.log(err.data)

})

// 提交弹窗数据

async submitDialogData () {

const imgBroadcastListBase64 = []

console.log(\'图片转base64开始...\')

this.dialogFormLoading = true

// 并发转码轮播图片list => base64

const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {

if (file.raw) { // 如果是本地文件

const response = await uploadImgToBase64(file.raw)

return response.result.replace(/.*;base64,/, \'\')

} else { // 如果是在线文件

const response = await URLImgToBase64(file.url)

return response.replace(/.*;base64,/, \'\')

}

})

// 按次序输出 base64图片

for (const textPromise of filePromises) {

imgBroadcastListBase64.push(await textPromise)

}

console.log(\'图片转base64结束...\')

this.diaLogForm.imgs = imgBroadcastListBase64.join()

console.log(this.diaLogForm)

if (!this.isEdit) { // 新增编辑公用一个组件。区分接口调用

const res = await addCommodity(this.diaLogForm) // 提交表单

if (res.status) {

this.$message.success(\'添加成功\')

}

} else {

const res = await modifyCommodity(this.diaLogForm) // 提交表单

if (res.status) {

this.$router.push(\'/goods/goods-list\')

this.$message.success(\'编辑成功\')

}

</script>

结语

至此常用的三种图片上传方式就介绍完了，转base64方式一般在小型项目中使用，大文件上传还是传统的 formdata或者云服务，更合适。但是通过转base64方式也使得，在前端进行图片编辑成为了可能，不需要上传到服务器就能预览。主要收获还是对于异步操作的处理。

最后

以下是总结出来最全前端框架视频，包含： javascript/vue/react/angualrde/express/koa/webpack 等学习资料。

【领取方式】

关注头条前端全栈架构丶第一时间获取最新前端资讯学习

手机用户可私信关键词【前端】即可获取全栈工程师路线和学习资料！

JavaScript实现图片上传到服务器和回显

关于js实现图片的上传和回显，曾经用户的代码粘在这里：

样式：这样写样式的道理是给<input>标签的父级设置一个背景图，就是‘+\'那个背景图，然后把<input>的宽高设置得跟父级一样，且完全透明（注意是透明不是隐藏），这样点击的时候看似是点击的‘+\'的节点，其实点击的是<input>节点。

.file-box {

position: relative;

display: inline-block;

width:100px;

height:100px;

background:url(\'images/uploadPc.png\')no-repeat;

background-size:100px 100px;

}

#input_file{

width:100%;

height:100%;

opacity: 0;

filter:alpha(opacity=0);

}

input标签：

<input type=\"file\" value=\"\" name=\"file\" id = \"input_file\"

accept=\"image/gif,image/jpeg,image/jpg,image/png,image/svg\" οnchange=\"imgPreview(this,0)\" >

</div>

实现imgPreview()方法: 这个方法是给$(\"#input_file\")这个对象设置图片的值并回显图片

function imgPreview(fileDom,i) {

//判断是否支持FileReader

if(window.FileReader) {

var reader = new FileReader();

} else {

alert(\"您的设备不支持图片预览功能，如需该功能请升级您的设备！\");

}

//获取文件

var file = fileDom.files[0];

var imageType = /^image\\//;

//是否是图片

if(!imageType.test(file.type)) {

alert(\"请选择图片！\");

return;

}

//读取完成

reader.onload = function(e) {

//图片路径设置为读取的图片

// img.src = e.target.result;

console.log(document.getElementsByClassName(\'file-box\'));

document.getElementsByClassName(\'file-box\')[i].style.background = \"url(\"+e.target.result+\")no-repeat\";//回显图片

document.getElementsByClassName(\'file-box\')[i].style.backgroundSize = \'200px 160px\';

console.log(\'reader\',reader)

};

reader.readAsDataURL(file);

}

上传部分的代码：

var formData = new FormData();

formData.append(\'photo\', $(\'#input_file\')[0].files[0]);

//ajax请求

$.ajax({

type: \"post\",

url: \"接口地址\",

data: formdata,

dataType: \'json\',

processData: false, // 告诉jQuery不要去处理发送的数据

contentType: false, // 告诉jQuery不要去设置Content-Type请求头

xhrFields:{withCredentials:true},

async: true, //默认是true：异步，false：同步。

success: function (data) {

callback(data);

error: function (data) {

layer.msg(\'请求异常\');

});

最终实现效果：

JavaScript实现图片上传到服务器和回显 (https://www.wpmee.com/) javascript教程第1张

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本网站。

标签：

上一篇： Docker网络基础入门(自定义网络实现固定容器ip地址)
下一篇：甘肃省政府工作报告征集意见建议(对于地方门户网站的建议)

建站教程

使用Vue实现图片上传的三种方式(JavaScript实现图片上传到服务器和回显)