解讀vant的Uploader上傳問題
更新時間：2022年10月20日 10:51:52 作者：lemon_sweety
這篇文章主要介紹了解讀vant的Uploader上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vant的Uploader上傳
vant的uploader組件的交互是點擊上傳之后才會觸發(fā)一系列回調函數(shù)，如果想要實現(xiàn)點擊uploader的時候先出現(xiàn)彈框提示，選擇了確定之后才進行文件上傳這該怎么做到呢？
大致是，給uploader組件外面包裹一層元素，然后給組件設為禁用模式，當外層的元素狀態(tài)改變時，就改變組件的disabled值，再使用vant提供的chooseFile通過 ref 可以獲取到 Uploader 實例并調用實例的方法重新調起文件選擇。
主要的步驟如下
首先，我們可以在uploader組件外面包裹一層div
?? ?<span ? ? ? @click="handleClick" ? ? ? v-if="isconfirm" ? ? ? class="message" ? ? ></span> ? ? <van-uploader ? ? ? v-model="fileList" ? ? ? :after-read="afterRead" ? ? ? :disabled="isconfirm" ? ? ? ref="uploadImg" ? ? />
然后在data以及methods中進行定義
data() {
? ? return {
? ? ? fileList: [],
? ? ? isconfirm: true
?};
? methods: {
? ? handleClick() {
? ? ? this.$dialog
? ? ? ? .confirm({
? ? ? ? ? message: "test,test,test"
? ? ? ? })
? ? ? ? .then(() => {
? ? ? ? ? this.isconfirm = false;
? ? ? ? ? this.$refs.uploadImg.chooseFile();
? ? ? ? })
? ? ? ? .catch(() => {
? ? ? ? ? this.isconfirm = true;
? ? ? ? });
? ? },
? }看到這里要注意chooseFile這個方法支持的版本是v2.5.6以上的，如果出現(xiàn)了沒有效果的話，先檢查一下自己安裝的版本是否是符合要求的。
檢查之后，版本也符合要求，但是this.$refs.uploadImg.chooseFile()就是沒有效果，這是怎么一回事呢？
原來跟瀏覽器執(zhí)行機制event loop有關，每當執(zhí)行到choosefile的時候，組件仍為禁用模式，無法調起，其實isconfirm狀態(tài)還沒有進行改變，所以調起文件選擇看不見效果，可以使用一個setTimeout或者是vue中的this.$nextTick()進行解決。
setTimeout(() => {
? ? this.$refs.uploadImg.chooseFile();
?}, 0);
?
this.$nextTick(() => {
??? ?this.$refs.uploadImg.chooseFile();
});vant文件上傳Uploader圖片壓縮
為什么要對圖片進行壓縮？
隨著科技的發(fā)展，手機像素越來越好，拍攝的圖片也越來越清晰。圖片越清晰，體積也就越大。當移動端上傳大圖時就會發(fā)生卡頓，請求超時的情況。
當圖片過大時，圖片預覽也會非常慢，所以需要在圖片上傳時對圖片進行壓縮。
vant中文件上傳組件Uploader并不支持圖片壓縮，因為業(yè)務場景中有多個地方需要上傳圖片時對圖片進行壓縮，所以我基于Uploader封裝了一個新的組件。
Uploader組件封裝
此組件封裝 基于vant文件上傳Uploader
API
| 屬性名 | 屬性說明 | 默認值 |
|---|---|---|
quality | 壓縮質量【0-1】 | 0.5 |
compressSwitch | 是否開啟壓縮 | false |
threshold | 達到此大小開始壓縮【500k】 | 500 |
Vant 文件上傳Uploader屬性請參照 vant官網(wǎng)
模板部分
<template> ? ? <van-uploader :fileList="$attrs.value" :before-read="beforeReadFn" v-bind="$attrs" v-on="$listeners"/> </template>
Javascript部分
export default {
? name: 'van-small-upload',
? props: {
? ? quality:{
? ? ? type:Number,
? ? ? default:0.1
? ? },
? ? compressSwitch:{
? ? ? type:Boolean,
? ? ? default:false
? ? },
? ? threshold:{
? ? ? type:Number,
? ? ? default:500
? ? },
? ? beforeRead:{
? ? ? type: Function,
? ? ? default:()=>true
? ? }
? },
? data() {
? ? return {
?
? ? }
? },
? methods: {
? ? // 處理圖片
? ? imgPreview(file,index) {
? ? ? console.log('處理圖片F(xiàn)n...');
? ? ? let self = this
? ? ? // 看支持不支持FileReader
? ? ? if (!file || !window.FileReader) return;
? ? ? const size = file.size/1024
? ? ? console.log(`圖片大小 ===> ${file.size/1024}k`);
? ? ? console.log('圖片壓縮：',this.compressSwitch?'開':'關');
? ? ? console.log('圖片壓縮閾值：',this.threshold+'k');
? ? ? console.log('圖片壓縮降幀值：',this.quality);
? ? ? if (/^image/.test(file.type) && size >= this.threshold && this.compressSwitch) {
? ? ? ? // 創(chuàng)建一個reader
? ? ? ? let reader = new FileReader()
? ? ? ? // 將圖片2將轉成 base64 格式
? ? ? ? reader.readAsDataURL(file)
? ? ? ? // 讀取成功后的回調
? ? ? ? reader.onloadend = function() {
? ? ? ? ? let result = this.result
? ? ? ? ? let img = new Image()
? ? ? ? ? img.src = result
? ? ? ? ? img.onload = function() {
? ? ? ? ? ? // 壓縮
? ? ? ? ? ? let data = self.compress(img,file.name,file.type)
? ? ? ? ? ? console.log(`壓縮后 ===>${data.fileData.size/1024}k`);
? ? ? ? ? ? self.$attrs.value[index].content = data.base64Data
? ? ? ? ? ? self.$attrs.value[index].file = data.fileData
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? },
? ? // 壓縮圖片
? ? compress(img, name, type) {
? ? ? let canvas = document.createElement('canvas')
? ? ? let ctx = canvas.getContext('2d')
? ? ? //瓦片canvas
? ? ? let tCanvas = document.createElement('canvas')
? ? ? let tctx = tCanvas.getContext('2d')
? ? ? // let initSize = img.src.length;
? ? ? let width = img.width
? ? ? let height = img.height
? ? ? //如果圖片大于四百萬像素，計算壓縮比并將大小壓至400萬以下
? ? ? let ratio
? ? ? if ((ratio = (width * height) / 4000000) > 1) {
? ? ? ? // console.log("大于400萬像素");
? ? ? ? ratio = Math.sqrt(ratio)
? ? ? ? width /= ratio
? ? ? ? height /= ratio
? ? ? } else {
? ? ? ? ratio = 1
? ? ? }
? ? ? canvas.width = width
? ? ? canvas.height = height
? ? ? // ? ?鋪底色
? ? ? ctx.fillStyle = '#fff'
? ? ? ctx.fillRect(0, 0, canvas.width, canvas.height)
? ? ? //如果圖片像素大于100萬則使用瓦片繪制
? ? ? let count
? ? ? if ((count = (width * height) / 1000000) > 1) {
? ? ? ? // console.log("超過100W像素");
? ? ? ? count = ~~(Math.sqrt(count) + 1) //計算要分成多少塊瓦片
? ? ? ? // ? ? ?計算每塊瓦片的寬和高
? ? ? ? let nw = ~~(width / count)
? ? ? ? let nh = ~~(height / count)
? ? ? ? tCanvas.width = nw
? ? ? ? tCanvas.height = nh
? ? ? ? for (let i = 0; i < count; i++) {
? ? ? ? ? for (let j = 0; j < count; j++) {
? ? ? ? ? ? tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)
? ? ? ? ? ? ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
? ? ? ? ? }
? ? ? ? }
? ? ? } else {
? ? ? ? ctx.drawImage(img, 0, 0, width, height)
? ? ? }
? ? ? //進行壓縮?
? ? ? let ndata = canvas.toDataURL('image/jpeg', this.quality)
? ? ? tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
? ? ? return {base64Data:ndata,fileData:this.dataURLtoFile(ndata,name,type)}
? ? },
? ? //將base64轉換為文件
? ? dataURLtoFile(dataurl,name,type) {
? ? ? name = name ? name : '圖片'
? ? ? type = type ? type : 'jpg'
? ? ? var arr = dataurl.split(','),
? ? ? ? bstr = atob(arr[1]),
? ? ? ? n = bstr.length,
? ? ? ? u8arr = new Uint8Array(n)
? ? ? while (n--) {
? ? ? ? u8arr[n] = bstr.charCodeAt(n)
? ? ? }
? ? ? return new File([u8arr], name, {
? ? ? ? type: type
? ? ? })
? ? },
? ? beforeReadFn(file,detail){
? ? ? const {index} = detail
? ? ? this.imgPreview(file,index)
? ? ? return this.beforeRead(...arguments);
? ? }
? },
? mounted(){
? ??
? }
};使用示例
<SmUpload v-model="fileList" :before-read="beforeRead" :compressSwitch="true" :quality="0.5"/>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2.0實現(xiàn)點擊其他區(qū)域關閉自定義div功能
這篇文章主要介紹了vue2.0實現(xiàn)點擊其他區(qū)域關閉自定義div功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
今天小編就為大家分享一篇淺談vue同一頁面中擁有兩個表單時,的驗證問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
關于Element-ui中table默認選中toggleRowSelection問題
這篇文章主要介紹了關于Element-ui中table默認選中toggleRowSelection問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了使用vue打包時gzip壓縮的兩種方案小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了在vue中安裝使用sass的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue+element搭建后臺小總結 el-dropdown下拉功能
這篇文章主要為大家詳細介紹了vue+element搭建后臺小總結，el-dropdown下拉功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
利用Vue3和element-plus實現(xiàn)圖片上傳組件
element-plus提供了uploader組件，但是不好定制化。所以本文將利用Vue3和element-plus實現(xiàn)一個圖片上傳的組件，感興趣的可以了解一下2022-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)商品規(guī)格選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要介紹了Vue透傳Attributes使用解析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了Vue--Router動態(tài)路由的用法,很多時候，我們需要將給定匹配模式的路由映射到同一個組件，在?Vue?Router?中，我們可以在路徑中使用一個動態(tài)字段來實現(xiàn)，我們稱之為路徑參數(shù)，本文對Vue?Router動態(tài)路由相關知識給大家介紹的非常詳細，需要的朋友參考下吧2022-08-08