【vue】移動端通過cube-ui實現圖片上傳
「Pre」cube-ui的安裝
POST：https://blog.csdn.net/dangbai01_/article/details/84935882
一、普通上傳
<cube-upload
action="//目標地址"
:simultaneous-uploads="1"
@files-added="filesAdded"
style="padding-left:15px" />
methods: {
filesAdded(files) {
let hasIgnore = false
const maxSize = 1 * 1024 * 1024 // 1M
for (let k in files) {
const file = files[k]
if (file.size > maxSize) {
file.ignore = true
hasIgnore = true
}
}
hasIgnore && this.$createToast({
type: 'warn',
time: 1000,
txt: 'You selected >1M files'
}).show()
},
}
配置 action 表示上傳的 URL 地址，而 simultaneous-uploads 則表示支援的併發上傳個數。
通過 files-added 事件可以實現檔案過濾，設定 file.ignore = true 即可。
二、普通的壓縮上傳
多了一個壓縮圖片的屬性
:process-file="processFile"
和一個壓縮圖片的方法：
processFile(file, next) {
compress(file, {
compress: {
width: 1600,
height: 1600,
quality: 1
}
}, next)
},
compress方法用的是鵝廠的，下邊的base64上傳也要用,命名是image.js,
檔案內容我放到自己github裡了：
POST：https://github.com/canwhite/QCVueTest/blob/master/image%20compress/image.js
專案中，我是在src裡邊，建了個modules資料夾放進去了/src/modules/image
引入(結合自己的元件位置)：
import compress from '../modules/image'
三、壓縮之後base64上傳
<cube-upload
ref="upload"
:action="action"
:simultaneous-uploads="1"
:process-file="processFile"
@file-submitted="fileSubmitted"
style = "padding-left:15px"
/>
data(){
return{
action: {
target: ‘//目標地址',
prop: 'base64Value'
}
}
}
methods: {
processFile(file, next) {
compress(file, {
compress: {
width: 1600,
height: 1600,
quality: 1
}
}, next)
},
fileSubmitted(file) {
file.base64Value = file.file.base64
},
}