資訊專欄INFORMATION COLUMN
摘要：大家好，我是云皓，話不多說，直入正題，獲取上傳文件自行獲取，也可通過的組件來獲取，轉(zhuǎn)化為文件，壓縮，轉(zhuǎn)換為文件，上傳。
1，獲取input上傳file文件（自行獲取，也可通過vant的upload組件來獲取）
2，轉(zhuǎn)化為base64文件
3，壓縮
4，轉(zhuǎn)換為blob文件
5，上傳。
下面直接上代碼（本代碼段是用用在vue&vantui 里面， 原理都在，可根據(jù)自己的需求來相應(yīng)的修改）
/**
* 上傳文件
*/
uploadImg (blob, base64) {
// 接收到回調(diào)函數(shù) 獲取到壓縮后 圖片文件，然后上傳就可以了
const formData = new FormData()
// 需要給文件名添加后綴擴(kuò)展名，否則傳到后端的是一個沒有擴(kuò)展名的文件
formData.append("file", blob, ".jpg")
formData.append("filename", blob + ".jpg")
//此處我自己封裝的api接口，大家可以無視，就是上傳提交的意思
api.uploadImg(formData)
.then(res => {
console.log(res)
})
},
/**
* 獲取到的二進(jìn)制文件 轉(zhuǎn) base64文件
* @param blob
*/
blobToBase64 (blob) {
const self = this // 綁定this
const reader = new FileReader() //實例化一個reader文件
reader.readAsDataURL(blob) // 添加二進(jìn)制文件
reader.onload = function (event) {
const base64 = event.target.result // 獲取到它的base64文件
const scale = 0.99 // 設(shè)置縮放比例 （0-1）
self.compressImg(base64, scale, self.uploadImg) // 調(diào)用壓縮方法
}
},
/**
* 壓縮圖片方法
* @param base64 ----baser64文件
* @param scale ----壓縮比例 畫面質(zhì)量0-9，數(shù)字越小文件越小畫質(zhì)越差
* @param callback ---回調(diào)函數(shù)
*/
compressImg (base64, scale, callback) {
console.log(`執(zhí)行縮放程序，scale=${scale}`)
// 處理縮放，轉(zhuǎn)換格式
// 下面的注釋就不寫了，就是new 一個圖片，用canvas來壓縮
const img = new Image()
img.src = base64
img.onload = function () {
const canvas = document.createElement("canvas")
const ctx = canvas.getContext("2d")
canvas.setAttribute("width", this.width)
canvas.setAttribute("height", this.height)
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
// 轉(zhuǎn)成base64 文件
let base64 = canvas.toDataURL("image/jpeg")
// 根據(jù)自己需求填寫大小 我的目標(biāo)是小于3兆
while (base64.length > 1024 * 1024 * 3) {
scale -= 0.01
base64 = canvas.toDataURL("image/jpeg", scale)
}
// baser64 TO blob 這一塊如果不懂可以自行百度，我就不加注釋了
const arr = base64.split(",")
const mime = arr[0].match(/:(.*?);/)[1]
const bytes = atob(arr[1])
const bytesLength = bytes.length
const u8arr = new Uint8Array(bytesLength)
for (let i = 0; i < bytes.length; i++) {
u8arr[i] = bytes.charCodeAt(i)
}
const blob = new Blob([u8arr], { type: mime })
// 回調(diào)函數(shù) 根據(jù)需求返回二進(jìn)制數(shù)據(jù)或者base64數(shù)據(jù)，我的項目都給返回了
callback(blob, base64)
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106939.html
摘要：背景作為一名前端工作人員，相信大家在開發(fā)系統(tǒng)的時候，經(jīng)常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎軀一震，以為會是一個棘手的問題，當(dāng)你讀完這篇文章的時候，你會發(fā)現(xiàn)都是你瞎操作了，真相就是這么簡單 背景 作為一名前端工作人員，相信大家在開發(fā)系統(tǒng)的時候，經(jīng)常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎...
摘要：背景作為一名前端工作人員，相信大家在開發(fā)系統(tǒng)的時候，經(jīng)常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎軀一震，以為會是一個棘手的問題，當(dāng)你讀完這篇文章的時候，你會發(fā)現(xiàn)都是你瞎操作了，真相就是這么簡單 背景 作為一名前端工作人員，相信大家在開發(fā)系統(tǒng)的時候，經(jīng)常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎...
摘要：背景作為一名前端工作人員，相信大家在開發(fā)系統(tǒng)的時候，經(jīng)常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎軀一震，以為會是一個棘手的問題，當(dāng)你讀完這篇文章的時候，你會發(fā)現(xiàn)都是你瞎操作了，真相就是這么簡單 背景 作為一名前端工作人員，相信大家在開發(fā)系統(tǒng)的時候，經(jīng)常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎...
摘要：簡介是由團(tuán)隊開發(fā)的一個簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊開發(fā)的一個簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時又不摒棄主流IE瀏覽器，沿用原來的...
閱讀 1968·2021-11-16 11:45
閱讀 3682·2021-09-06 15:02
閱讀 2027·2019-08-30 15:44
閱讀 2291·2019-08-30 11:21
閱讀 1857·2019-08-29 16:31
閱讀 3429·2019-08-29 13:55
閱讀 1905·2019-08-29 12:15
閱讀 3257·2019-08-28 18:05
