主要功能：限制圖片張數(shù)、圖片大小壓縮、同時上傳多張、上傳后可編輯刪除、上傳中和上傳失敗狀態(tài)顯示。
使用配置：使用vantUI、axios請求經(jīng)過封裝、安裝image-compressor.js圖片壓縮
步驟：
- 安裝image-compressor.js
npm install image-compressor.js //注意是image-compressor.js不是image-compressor
- 創(chuàng)建一個VUE組件，文件名可以為updatefile
<template>
<div class="updatefile">
<div class="fileCon">
<div class="list">
<div v-for="(item,index) in list" :key="index">
<img class="close" src="../assets/delete.png" @click="close(index)">
<img :src="item" />
</div>
<div class="add" v-show="maxStatus" @click="chooseType">
<img class="add-image" src="../assets/add.png">
</div>
</div>
</div>
<input id="upload_file" type="file" class="file-input" accept="image/png,image/jpeg,image/jpg" :multiple="multiple" @change="inputChange" style="display: none" />
</div>
</template>
<script>
import { Toast } from 'vant'
import ImageCompressor from 'image-compressor.js'
import checkImgFileSize from '@/utils/checkImgFileSize.js'
export default {
name: 'updatefile',
data() {
return {
maxStatus: true,
}
},
props: {
//是否支持多選
multiple: {
type: Boolean,
default: true,
},
//最多上傳幾張
max: {
type: Number,
default: 3,
},
//編輯反顯使用
list: {
type: Array,
default() {
return []
},
},
},
created() {
this.maxStatus = this.list.length !== this.max
},
methods: {
chooseType() {
document.getElementById('upload_file').click()
},
close(index) {
this.list.splice(index, 1)
this.maxStatus = this.list.length !== this.max
},
async inputChange(e) {
let files = e.target.files
let len = this.list.length + files.length
if (len > this.max) {
document.getElementById('upload_file').value = ''
Toast(`最多允許上傳${this.max}張`)
return
}
let uploadAll = [].slice.call(files, 0).map(this.upload)
// 使用object.values(files)，測試安卓存在兼容性問題，替換為[].slice.call(files ,0)
Toast.loading({
// 上傳中效果，可自行替換。
text: '上傳中...',
spinnerType: 'fading-circle',
})
let result = await Promise.all(uploadAll)
console.log('result:' + result)
document.getElementById('upload_file').value = ''
Toast.clear()
},
upload(file) {
// console.log('file1: ', file)
return new Promise(async resolve => {
if (checkImgFileSize(file)) {
const that = this
const imageCompressor = new ImageCompressor(file, {
// 圖片壓縮的質(zhì)量，可改
quality: 0.2,
success(fileRes) {
that.uploadFile(fileRes, resolve)
},
})
console.log(imageCompressor)
} else {
this.uploadFile(file, resolve)
}
})
},
// 調(diào)用接口上傳圖片
uploadFile(file, resolve) {
// console.log('file2: ', file)
let form = new FormData()
form.append('uploadFileName', file)
// form.append('***') //根據(jù)上傳入?yún)⑻砑訁?shù)
this.$instance
.post('v1/admin/upload/file', form)
.then(result => {
if (result.data.data !== undefined) {
if (result.data.code !== 0) {
// 失敗處理
Toast(`圖片上傳失敗`)
resolve(result)
// return
} else {
this.list.push(result.data.data)
// console.log('this.list: ', this.list)
if (this.list.length === this.max) {
this.maxStatus = false
}
resolve(result)
}
} else {
// 失敗處理
Toast(`圖片上傳失敗`)
}
})
.catch(error => {
Toast(`圖片上傳失敗`)
console.log('error: ', error)
})
},
},
}
</script>
<style lang="scss" scoped>
.updatefile {
.fileCon {
width: 100%;
min-height: 76px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.list {
width: 100%;
min-height: 76px;
display: flex;
flex-wrap: wrap;
align-items: center;
& > div {
width: 54px;
height: 54px;
margin: 10px 10px 10px 0;
position: relative;
background: #ccc;
& > img {
width: 100%;
height: 100%;
}
.close {
width: 15px;
height: 15px;
background-color: #fff;
border-radius: 50%;
background-image: url(../assets/delete.png);
background-size: 100%;
position: absolute;
top: -4px;
right: -4px;
}
}
}
}
.add {
width: 54px;
height: 54px;
background-color: #ccc;
.add-image {
width: 20px !important;
height: 20px !important;
position: relative;
top: 15px;
left: 50%;
transform: translate(-50%);
}
}
}
</style>
ps：從父級頁面?zhèn)魅胂鄳?yīng)的值到props里面
- 引入checkImgFileSize.js,該文件表示圖片超過1M就進行壓縮
export default (file, maxSize = 1) => {
// 轉(zhuǎn)為 M
const size = file.size
return size >= maxSize * 1024 * 1024
}
