整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
目中需要上傳圖片可謂是經常遇到的需求，本文將介紹 3 種不同的圖片上傳方式，在這總結分享一下，有什么建議或者意見，請大家踴躍提出來。
沒有業務場景的功能都是耍流氓，那么我們先來模擬一個需要實現的業務場景。假設我們要做一個后臺系統添加商品的頁面，有一些商品名稱、信息等字段，還有需要上傳商品輪播圖的需求。
我們就以Vue、Element-ui，封裝組件為例子聊聊如何實現這個功能。其他框架或者不用框架實現的思路都差不多，本文主要聊聊實現思路。
1.云儲存
常見的 七牛云，OSS（阿里云）等，這些云平臺提供API接口，調用相應的接口，文件上傳后會返回圖片存儲在服務器上的路徑，前端獲得這個路徑保存下來提交給后端即可。此流程處理相對簡單。
主要步驟
代碼范例
我們以阿里的 OSS 服務來實現，們試著來封裝一個OSS的圖片上傳組件。
通過element-ui的upLoad組件的 http-request 參數來自定義我們的文件上傳，僅僅使用他組件的樣式，和其他上傳前的相關鉤子（控制圖片大小，上傳數量限制等）。
<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' // 一個生產唯一的id的方法
import OSS from 'ali-oss'
export default {
name: 'imgUpload',
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 的方式進行文件上傳。具體的思路和云文件服務器差不多。
主要步驟
代碼示例
此種圖片上傳根據element-ui的upLoad組件只要傳入后端約定的相關字段即可實現，若使用元素js也是生成formdata對象，通過Ajax去實現上傳也是類似的。
這里只做一個簡單的示例，具體請看el-upload組件相文檔就能實現
<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' // 一個生產唯一的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) // 這里可以獲得上傳成功的相關信息
}
}
}
</script>
圖片轉 base64 后上傳
有時候做一些私活項目，或者一些小圖片上傳可能會采取前端轉base64后成為字符串上傳。當我們有這一個需求，有一個商品輪播圖多張，轉base64編碼后去掉data:image/jpeg;base64,將字符串以逗號的形勢拼接，傳給后端。我們如何來實現呢。
1.本地文件如何轉成 base64
我們通過H5新特性 readAsDataURL 可以將文件轉base64格式，輪播圖有多張，可以在點擊后立馬轉base64也可，我是在提交整個表單錢一次進行轉碼加工。
具體步驟
在這里要注意一下，因為 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
})
}
添加商品頁面 部分代碼
<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文件，且不超過2M</div>
</el-upload>
<el-button>submitData</el-button>
</div>
</template>
<script>
import { uploadImgToBase64 } from '@/utils' // 導入本地圖片轉base64的方法
export default {
name: 'imgUpload',
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
})
}
添加商品頁面 部分代碼
<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文件，且不超過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:'', // 商品名稱字段
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 等學習資料。
.需求
最近我們公司在做一個官網涉及到圖片視頻上傳的問題，時間比較緊急（實際后端想偷懶），就讓我直傳視頻到阿里云的oss上。我一聽，也是一臉懵，人在家中坐，鍋從天上來。話不多說，我直沖度娘，網上的案例真的是非常的多，眼花繚亂，我也試了幾個發現都是有問題的，又聯系不到博主，最終我還是放棄了，干脆自己搞一個吧，經過三天三夜的奮戰（其實是一晚上）！所以分享出來給各位小伙伴們，希望早日脫坑！
先上效果圖
2.阿里oss的安裝
npm install ali-oss --save3.封裝oss通用上傳js工具類
"use strict";
import { dateFormat } from './utils.js'
var OSS = require("ali-oss");
let url='';
export default {
/**
* 創建隨機字符串
* @param num
* @returns {string}
*/
randomString(num) {
const chars = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
"o",
"p",
"q",
"r",
"s",
"t",
"u",
"v",
"w",
"x",
"y",
"z"
];
let res = "";
for (let i = 0; i < num; i++) {
var id = Math.ceil(Math.random() * 35);
res += chars[id];
}
return res;
},
/**
* 創建oss客戶端對象
* @returns {*}
*/
createOssClient() {
return new Promise((resolve, reject) => {
const client = new OSS({
region: "XXXXX", // 請設置成你的
accessKeyId: "XXXXX", // 請設置成你的
accessKeySecret: "XXXXX", // 請設置成你的
bucket: "XXXXX", // 請設置成你的
secure: true // 上傳鏈接返回支持https
});
resolve(client);
});
},
/**
* 文件上傳
* @param option 參考csdn: https://blog.csdn.net/qq_27626333/article/details/81463139
*/
ossUploadFile(option) {
const file = option.file;
const self = this;
// var url = '';
return new Promise((resolve, reject) => {
const date = dateFormat(new Date(), "yyyyMMdd"); // 當前時間
const dateTime = dateFormat(new Date(), "yyyyMMddhhmmss"); // 當前時間
const randomStr = self.randomString(4); // 4位隨機字符串
const extensionName = file.name.substr(file.name.indexOf(".")); // 文件擴展名
const fileName =
"video/" + date + "/" + dateTime + "_" + randomStr + extensionName; // 文件名字（相對于根目錄的路徑 + 文件名）
// 執行上傳
self.createOssClient().then(client => {
// 異步上傳,返回數據
resolve({
fileName: file.name,
fileUrl: fileName
});
// 上傳處理
// 分片上傳文件
client
.multipartUpload(fileName, file, {
progress: function(p) {
const e = {};
e.percent = Math.floor(p * 100);
// console.log('Progress: ' + p)
option.onProgress(e);
}
})
.then(
val => {
window.url = val
console.info('woc',url);
if (val.res.statusCode === 200) {
option.onSuccess(val);
return val;
} else {
option.onError("上傳失敗");
}
},
err => {
option.onError("上傳失敗");
reject(err);
}
);
});
});
}
};4.在src下的util文件創建utils.js工具類
/**
* 時間日期格式化
* @param format
* @returns {*}
*/
export const dateFormat = function(dateObj, format) {
const date = {
"M+": dateObj.getMonth() + 1,
"d+": dateObj.getDate(),
"h+": dateObj.getHours(),
"m+": dateObj.getMinutes(),
"s+": dateObj.getSeconds(),
"q+": Math.floor((dateObj.getMonth() + 3) / 3),
"S+": dateObj.getMilliseconds()
};
if (/(y+)/i.test(format)) {
format = format.replace(
RegExp.$1,
(dateObj.getFullYear() + "").substr(4 - RegExp.$1.length)
);
}
for (const k in date) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(
RegExp.$1,
RegExp.$1.length === 1
? date[k]
: ("00" + date[k]).substr(("" + date[k]).length)
);
}
}
return format;
};5.vue頁面中的使用
<template>
<div>
<el-form :model="form" label-width="80px" size="small">
<el-form-item label="上傳視頻">
<el-upload class="upload-demo" action=""
:http-request="fnUploadRequest"
:show-file-list="true"
:limit=1
:on-exceed="beyondFile"
:on-success="handleVideoSuccess"
:before-upload="beforeUploadVideo">
<div tabindex="0" class="el-upload-video">
<i class="el-upload-video-i el-icon-plus avatar-uploader-icon"></i>
</div>
<div class="el-upload__tip" slot="tip">上傳視頻文件，且不超過500mb</div>
</el-upload>
<el-input type="textarea" rows="5" v-model="urls"></el-input>
</el-form-item>
</el-form>
</div>
</template>6.js中的代碼
<script>
import oss from '../../util/oss.js'
export default {
data: function() {
return {
form: {
status: true
},
url:[],
urls:''
}
},
methods: {
/**
* @description [fnUploadRequest 覆蓋默認的上傳行為，實現自定義上傳]
* @param {object} option [上傳選項]
* @return {null} [沒有返回]
*/
async fnUploadRequest(option) {
oss.ossUploadFile(option);
},
// 視頻上傳
beforeUploadVideo(file) {
// todo
},
// 視頻上傳成功后
handleVideoSuccess(response, file, fileList) {
console.log('url',window.url);
console.log('url',window.url.res.requestUrls);
this.url = window.url.res.requestUrls;
console.log('3322',this.url.length)
for(var i = 0;i<this.url.length;i++){
console.log('href',this.url[i])
this.urls = this.url[i].split('?')[0]
console.log('jjjj',this.url)
}
// todo
},
// 視頻添加多個視頻文件事件
beyondFile(files, fileList) {
},
}
}
</script>7.css代碼
<style lang="less" scoped>
.el-upload-video {
width: 100px;
height: 100px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.el-upload-video-i{
font-size: 36px;
padding-top: 25px;
color: #8c939d;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
</style>8.總結
我在這里講一下需要注意的幾點：
1.這個我沒有貼出阿里云的一些配置，自己可以問問度娘，網上有很多資料，注意跨域的配置就行。
2.這樣做的優點就是不用和后端交互，圖片直傳到你阿里云的oss然后返回鏈接，不需要后端的傳值，省去了很多和后端人員聯調的時間，大大提高了開發的效率。
代碼我已經都貼出來了，樣式的話可以自己改，這個是可以根據自己的需求來更改的，如果還有什么問題的話，歡迎留言評論！
圖片來源于網絡
是一個包含了函數計算每種 Runtime 結合 HTTP Trigger 實現文件上傳和文件下載的示例集。每個示例包括:
我們知道不同語言在處理 HTTP 協議上傳下載時都有很多中方法和社區庫，特別是結合函數計算的場景，開發人員往往需要耗費不少精力去學習和嘗試。本示例集編撰的目的就是節省開發者甄別的精力和時間，為每種語言提供一種有效且符合社區最佳實踐的方法，可以拿來即用。
當前已支持的 Runtime 包括：
計劃支持的 Runtime 包括：
不打算支持的 Runtime 包括：
由于函數計算對于 HTTP 的 Request 和 Response 的 Body 大小限制均為 6M，所以該示例集只適用于借助函數計算上傳和下載文件小于 6M 的場景。對于大于 6M 的情況，可以考慮如下方法:
在開始之前請確保開發環境已經安裝了如下工具：
克隆代碼：
git clone https://github.com/vangie/fc-file-transfer本地啟動函數：
$ make start
...
HttpTrigger httpTrigger of file-transfer/nodejs was registered
url: http://localhost:8000/2016-08-15/proxy/file-transfer/nodejs
methods: [ 'GET', 'POST' ]
authType: ANONYMOUS
HttpTrigger httpTrigger of file-transfer/python was registered
url: http://localhost:8000/2016-08-15/proxy/file-transfer/python
methods: [ 'GET', 'POST' ]
authType: ANONYMOUS
HttpTrigger httpTrigger of file-transfer/java was registered
url: http://localhost:8000/2016-08-15/proxy/file-transfer/java
methods: [ 'GET', 'POST' ]
authType: ANONYMOUS
HttpTrigger httpTrigger of file-transfer/php was registered
url: http://localhost:8000/2016-08-15/proxy/file-transfer/php
methods: [ 'GET', 'POST' ]
authType: ANONYMOUS
function compute app listening on port 8000!make start 命令會調用 Makefile 文件中的指令，通過 fun local 在本地的 8000 端口開放 HTTP 服務，控制臺會打印出每個 HTTP Trigger 的 URL 、支持的 HTTP 方法，以及認證方式。
上面四個 URL 地址隨便選一個在瀏覽器中打開示例頁面。
所有示例都實現了下述四個 HTTP 接口：
此外為了能正確的計算相對路徑，在訪問根路徑時如果不是以/結尾，都會觸發一個 301 跳轉，在 URL 末尾加上一個/。
查看更多：https://yq.aliyun.com/articles/743642?utm_content=g_1000103098
上云就看云棲號：更多云資訊，上云案例，最佳實踐，產品入門，訪問：https://yqh.aliyun.com/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
