目中需要上傳圖片可謂是經(jīng)常遇到的需求，本文將介紹 3 種不同的圖片上傳方式，在這總結(jié)分享一下，有什么建議或者意見(jiàn)，請(qǐng)大家踴躍提出來(lái)。

沒(méi)有業(yè)務(wù)場(chǎng)景的功能都是耍流氓，那么我們先來(lái)模擬一個(gè)需要實(shí)現(xiàn)的業(yè)務(wù)場(chǎng)景。假設(shè)我們要做一個(gè)后臺(tái)系統(tǒng)添加商品的頁(yè)面，有一些商品名稱(chēng)、信息等字段，還有需要上傳商品輪播圖的需求。

我們就以Vue、Element-ui，封裝組件為例子聊聊如何實(shí)現(xiàn)這個(gè)功能。其他框架或者不用框架實(shí)現(xiàn)的思路都差不多，本文主要聊聊實(shí)現(xiàn)思路。

1.云儲(chǔ)存

常見(jiàn)的 七牛云，OSS（阿里云）等，這些云平臺(tái)提供API接口，調(diào)用相應(yīng)的接口，文件上傳后會(huì)返回圖片存儲(chǔ)在服務(wù)器上的路徑，前端獲得這個(gè)路徑保存下來(lái)提交給后端即可。此流程處理相對(duì)簡(jiǎn)單。

主要步驟

• 向后端發(fā)送請(qǐng)求，獲取OSS配置數(shù)據(jù)
• 文件上傳，調(diào)用OSS提供接口
• 文件上傳完成，后的文件存儲(chǔ)在服務(wù)器上的路徑
• 將返回的路徑存值到表單對(duì)象中

代碼范例

我們以阿里的 OSS 服務(wù)來(lái)實(shí)現(xiàn)，們?cè)囍鴣?lái)封裝一個(gè)OSS的圖片上傳組件。

通過(guò)element-ui的upLoad組件的 http-request 參數(shù)來(lái)自定義我們的文件上傳，僅僅使用他組件的樣式，和其他上傳前的相關(guān)鉤子（控制圖片大小，上傳數(shù)量限制等）。

<template>
 <el-upload
 list-type="picture-card"
 action="''"
 :http-request="upload"
 :before-upload="beforeAvatarUpload">
 <i class="el-icon-plus"></i>
 </el-upload>
</template>
 
<script>
 import {getAliOSSCreds} from '@/api/common' // 向后端獲取 OSS秘鑰信息
 import {createId} from '@/utils' // 一個(gè)生產(chǎn)唯一的id的方法
 import OSS from 'ali-oss'
 
 export default {
 name: 'imgUpload',
 data () {
 return {}
 },
 methods: {
 // 圖片上傳前驗(yàn)證
 beforeAvatarUpload (file) {
 const isLt2M = file.size / 1024 / 1024 < 2
 if (!isLt2M) {
 this.$message.error('上傳頭像圖片大小不能超過(guò) 2MB!')
 }
 return isLt2M
 },
 // 上傳圖片到OSS 同時(shí)派發(fā)一個(gè)事件給父組件監(jiān)聽(tīng)
 upload (item) {
 getAliOSSCreds().then(res => { // 向后臺(tái)發(fā)請(qǐng)求 拉取OSS相關(guān)配置
 let creds = res.body.data
 let client = new OSS.Wrapper({
 region: 'oss-cn-beijing', // 服務(wù)器集群地區(qū)
 accessKeyId: creds.accessKeyId, // OSS帳號(hào)
 accessKeySecret: creds.accessKeySecret, // OSS 密碼
 stsToken: creds.securityToken, // 簽名token
 bucket: 'imgXXXX' // 阿里云上存儲(chǔ)的 Bucket
 })
 let key = 'resource/' + localStorage.userId + '/images/' + createId() + '.jpg' // 存儲(chǔ)路徑，并且給圖片改成唯一名字
 return client.put(key, item.file) // OSS上傳
 }).then(res => {
 console.log(res.url)
 this.$emit('on-success', res.url) // 返回圖片的存儲(chǔ)路徑
 }).catch(err => {
 console.log(err)
 })
 }
 }
 }
</script>

傳統(tǒng)文件服務(wù)器上傳圖片

此方法就是上傳到自己文件服務(wù)器硬盤(pán)上，或者云主機(jī)的硬盤(pán)上，都是通過(guò) formdata 的方式進(jìn)行文件上傳。具體的思路和云文件服務(wù)器差不多。

主要步驟

• 設(shè)置服務(wù)器上傳路徑、上傳文件字段名、header、data參數(shù)等
• 上傳成功后，返回服務(wù)器存儲(chǔ)的路徑
• 返回的圖片路徑存儲(chǔ)到表單提交對(duì)象中

代碼示例

此種圖片上傳根據(jù)element-ui的upLoad組件只要傳入后端約定的相關(guān)字段即可實(shí)現(xiàn)，若使用元素js也是生成formdata對(duì)象，通過(guò)Ajax去實(shí)現(xiàn)上傳也是類(lèi)似的。

這里只做一個(gè)簡(jiǎn)單的示例，具體請(qǐng)看el-upload組件相文檔就能實(shí)現(xiàn)

<template>
 <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>
 
<script>
 import {getAliOSSCreds} from '@/api/common' // 向后端獲取 OSS秘鑰信息
 import {createId} from '@/utils' // 一個(gè)生產(chǎn)唯一的id的方法
 import OSS from 'ali-oss'
 
 export default {
 name: 'imgUpload',
 data () {
 return {
 headerMsg:{Token:'XXXXXX'},
 upLoadUrl:'xxxxxxxxxx'
 }
 },
 methods: {
 // 上傳圖片成功
 imgSuccess (res, file, fileList) {
 console.log(res)
 console.log(file)
 console.log(fileList) // 這里可以獲得上傳成功的相關(guān)信息
 }
 }
 }
</script>

圖片轉(zhuǎn) base64 后上傳

有時(shí)候做一些私活項(xiàng)目，或者一些小圖片上傳可能會(huì)采取前端轉(zhuǎn)base64后成為字符串上傳。當(dāng)我們有這一個(gè)需求，有一個(gè)商品輪播圖多張，轉(zhuǎn)base64編碼后去掉data:image/jpeg;base64,將字符串以逗號(hào)的形勢(shì)拼接，傳給后端。我們?nèi)绾蝸?lái)實(shí)現(xiàn)呢。

1.本地文件如何轉(zhuǎn)成 base64

我們通過(guò)H5新特性 readAsDataURL 可以將文件轉(zhuǎn)base64格式，輪播圖有多張，可以在點(diǎn)擊后立馬轉(zhuǎn)base64也可，我是在提交整個(gè)表單錢(qián)一次進(jìn)行轉(zhuǎn)碼加工。

具體步驟

• 新建文件封裝 異步 轉(zhuǎn)base64的方法
• 添加商品的時(shí)候選擇本地文件，選中用對(duì)象保存整個(gè)file對(duì)象
• 最后提交整個(gè)商品表單之前進(jìn)行編碼處理

在這里要注意一下，因?yàn)?readAsDataURL 操作是異步的，我們?nèi)绾螌⒋嬖跀?shù)組中的若干的 file對(duì)象，進(jìn)行編碼，并且按照上傳的順序，把編碼后端圖片base64字符串儲(chǔ)存在一個(gè)新數(shù)組內(nèi)呢，首先想到的是promise的鏈?zhǔn)秸{(diào)用，可是不能并發(fā)進(jìn)行轉(zhuǎn)碼，有點(diǎn)浪費(fèi)時(shí)間。我們可以通過(guò)循環(huán) async 函數(shù)進(jìn)行并發(fā)，并且排列順序。請(qǐng)看 methods 的 submitData 方法

utils.js

export function uploadImgToBase64 (file) {
 return new Promise((resolve, reject) => {
 const reader = new FileReader()
 reader.readAsDataURL(file)
 reader.onload = function () { // 圖片轉(zhuǎn)base64完成后返回reader對(duì)象
 resolve(reader)
 }
 reader.onerror = reject
 })
}

添加商品頁(yè)面 部分代碼

<template>
 <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="">
 <i class="el-icon-plus"></i>
 <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)2M</div>
 </el-upload>
 <el-button>submitData</el-button> 
 </div>
</template>
 
<script>
 import { uploadImgToBase64 } from '@/utils' // 導(dǎo)入本地圖片轉(zhuǎn)base64的方法
 
 export default {
 name: 'imgUpload',
 data () {
 return {
 diaLogForm: {
 goodsName:'', // 商品名稱(chēng)字段
 imgBroadcastList:[], // 儲(chǔ)存選中的圖片列表
 imgsStr:'' // 后端需要的多張圖base64字符串 , 分割
 }
 }
 },
 methods: {
 // 圖片選擇后 保存在 diaLogForm.imgBroadcastList 對(duì)象中
 imgBroadcastChange (file, fileList) {
 const isLt2M = file.size / 1024 / 1024 < 2 // 上傳頭像圖片大小不能超過(guò) 2MB
 if (!isLt2M) {
 this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
 this.$message.error('圖片選擇失敗，每張圖片大小不能超過(guò) 2MB,請(qǐng)重新選擇!')
 } else {
 this.diaLogForm.imgBroadcastList.push(file)
 }
 },
 // 有圖片移除后 觸發(fā)
 imgBroadcastRemove (file, fileList) {
 this.diaLogForm.imgBroadcastList = fileList
 },
 // 提交彈窗數(shù)據(jù)
 async submitDialogData () {
 const imgBroadcastListBase64 = []
 console.log('圖片轉(zhuǎn)base64開(kāi)始...')
 // 并發(fā) 轉(zhuǎn)碼輪播圖片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('圖片轉(zhuǎn)base64結(jié)束..., ', imgBroadcastListBase64)
 this.diaLogForm.imgsStr = imgBroadcastListBase64.join()
 console.log(this.diaLogForm)
 const res = await addCommodity(this.diaLogForm) // 發(fā)請(qǐng)求提交表單
 if (res.status) {
 this.$message.success('添加商品成功')
 // 一般提交成功后后端會(huì)處理，在需要展示商品地方會(huì)返回一個(gè)圖片路徑 
 }
 },
 }
 }
</script>

這樣本地圖片上傳的時(shí)候轉(zhuǎn)base64上傳就完成了。可是輪播圖有可以進(jìn)行編輯，我們?cè)撊绾翁幚砟兀恳话銇?lái)說(shuō)商品增加頁(yè)面和修改頁(yè)面可以公用一個(gè)組件，那么我們繼續(xù)在這個(gè)頁(yè)面上修改。

編輯時(shí)我們首先會(huì)拉取商品原有數(shù)據(jù)，進(jìn)行展示，在進(jìn)行修改，這時(shí)候服務(wù)器返回的圖片是一個(gè)路徑 http://xxx.xxx.xxx/abc.jpg 這樣，當(dāng)我們新增一張圖片的還是和上面的方法一樣轉(zhuǎn)碼即可。可是后端說(shuō)，沒(méi)有修改的圖片也要賺base64轉(zhuǎn)過(guò)來(lái)，好吧那就做把。這是一個(gè)在線(xiàn)鏈接 圖片，不是本地圖片，怎么做呢？

2. 在線(xiàn)圖片轉(zhuǎn)base64

具體步驟

utils.js 文件添加在線(xiàn)圖片轉(zhuǎn)base64的方法，利用canvas

編輯商品，先拉取原來(lái)的商品信息展示到頁(yè)面

提交表單之前，區(qū)分在線(xiàn)圖片還是本地圖片進(jìn)行轉(zhuǎn)碼

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

添加商品頁(yè)面 部分代碼

<template>
 <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="">
 <i class="el-icon-plus"></i>
 <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)2M</div>
 </el-upload>
 <el-button>submitData</el-button> 
 </div>
</template>
 
<script>
 import { uploadImgToBase64, URLImgToBase64 } from '@/utils'
 
 export default {
 name: 'imgUpload',
 data () {
 return {
 diaLogForm: {
 goodsName:'', // 商品名稱(chēng)字段
 imgBroadcastList:[], // 儲(chǔ)存選中的圖片列表
 imgsStr:'' // 后端需要的多張圖base64字符串 , 分割
 }
 }
 },
 created(){
 this.getGoodsData()
 },
 methods: {
 // 圖片選擇后 保存在 diaLogForm.imgBroadcastList 對(duì)象中
 imgBroadcastChange (file, fileList) {
 const isLt2M = file.size / 1024 / 1024 < 2 // 上傳頭像圖片大小不能超過(guò) 2MB
 if (!isLt2M) {
 this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
 this.$message.error('圖片選擇失敗，每張圖片大小不能超過(guò) 2MB,請(qǐng)重新選擇!')
 } else {
 this.diaLogForm.imgBroadcastList.push(file)
 }
 },
 // 有圖片移除后 觸發(fā)
 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' 轉(zhuǎn)成[{url:'http://xxx.xxx.xx/j.jpg',...}] 這種格式在upload組件內(nèi)展示。 imgBroadcastList 展示原有的圖片
 this.diaLogForm.imgBroadcastList = this.diaLogForm.imgsStr.split(',').map(v => ({ url: this.BASE_URL + '/' + v })) 
 }
 }).catch(err => {
 console.log(err.data)
 })
 },
 // 提交彈窗數(shù)據(jù)
 async submitDialogData () {
 const imgBroadcastListBase64 = []
 console.log('圖片轉(zhuǎn)base64開(kāi)始...')
 this.dialogFormLoading = true
 // 并發(fā) 轉(zhuǎn)碼輪播圖片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 { // 如果是在線(xiàn)文件
 const response = await URLImgToBase64(file.url)
 return response.replace(/.*;base64,/, '')
 }
 })
 // 按次序輸出 base64圖片
 for (const textPromise of filePromises) {
 imgBroadcastListBase64.push(await textPromise)
 }
 console.log('圖片轉(zhuǎn)base64結(jié)束...')
 this.diaLogForm.imgs = imgBroadcastListBase64.join()
 console.log(this.diaLogForm)
 if (!this.isEdit) { // 新增編輯 公用一個(gè)組件。區(qū)分接口調(diào)用
 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>

結(jié)語(yǔ)

至此常用的三種圖片上傳方式就介紹完了，轉(zhuǎn)base64方式一般在小型項(xiàng)目中使用，大文件上傳還是傳統(tǒng)的 formdata或者 云服務(wù)，更合適。但是 通過(guò)轉(zhuǎn)base64方式也使得，在前端進(jìn)行圖片編輯成為了可能，不需要上傳到服務(wù)器就能預(yù)覽。主要收獲還是對(duì)于異步操作的處理。

最后

以下是總結(jié)出來(lái)最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學(xué)習(xí)資料。

【領(lǐng)取方式】

關(guān)注頭條 前端全棧架構(gòu)丶第一時(shí)間獲取最新前端資訊學(xué)習(xí)

手機(jī)用戶(hù)可私信關(guān)鍵詞 【前端】即可獲取全棧工程師路線(xiàn)和學(xué)習(xí)資料！