「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
},
}