好久没写了…言简意赅,直接介绍el-upload怎么实现七牛云上传图片以及其中的注意事项。
首先先看下面一串代码:
<el-form-item >
<el-upload
action="http://up-z0.qiniup.com"
list-type="picture-card"
multiple
:data="postData"
:on-success="handleAvatarSuccess"
:on-error="handleError"
:before-upload="beforeAvatarUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="upImgList"
:limit="6"
:on-exceed="overLimitNum"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
action:后面的url就是七牛云的上传服务器域名,七牛云官网有介绍,不同的url代表着不同区域——https://developer.qiniu.com/kodo/api/1251/bput
上传到华东区的域名为up.qiniup.com、up-z0.qiniup.com和upload.qiniup.com
上传到华北区的域名为up-z1.qiniup.com和upload-z1.qiniup.com
data:postData是一个对象,具体下文中会提到(里面必须有token字段)。
on-success:文件上传成功时的钩子,一般用来处理下文中的file-list="upImgList"。
on-error:文件上传失败时的钩子,一般用来提示操作。
before-upload:上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。这里一般处理上传图片的格式、大小等要求,不符合要求的是在这个地方pass掉。
on-preview:点击文件列表中已上传的文件时的钩子,可以完成观看发大图效果,但是必须配合上文中的
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
on-remove:文件列表移除文件时的钩子,处理删除逻辑。
file-list:存放的上传图片集合,里面的单个对象必须有name和url字段。
limit:上传文件个数限制。
on-exceed:当文件个数超出限制时所触发的钩子,一般都是弹出提示对话框操作。
然后是data数据:
upImgList:[],
//七牛云一系列参数
dialogImageUrl: '',
dialogVisible: false,
postData: {
token: ''
},
domain:''
其中的domain就是自己在七牛云里配置的域名,token则是通过后台请求所得的上传凭证。
核心methods:
//-------------------------------
handleRemove(file, fileList) {
console.log("handleRemove------",file, fileList);
let list = [];
if(fileList.length == 0){
this.upImgList = list;
}else{
for(var i =0;i<fileList.length;i++){
list.push({
name:fileList[i].name,
url:fileList[i].url
})
}
this.upImgList = list;
}
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleAvatarSuccess(res, file) { //上传成功后在图片框显示图片
//this.imageUrl = this.domain+'/'+ res.key;
this.upImgList.push({
name:res.hash,
url:this.domain+'/'+res.key
});
},
handleError(res) { //显示错误
console.log("handleError ---- ",res)
},
overLimitNum(files, fileList){
this.$message.warning('抱歉,最多上传6张图片!')
},
beforeAvatarUpload(file) { //在图片提交前进行验证
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = (file.size / 1024 / 1024) < 2
if (!isJPG&&!isPNG) {
this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return (isJPG || isPNG) && isLt2M
}
handleAvatarSuccess和handleRemove里面的逻辑之所以那样写是因为特殊需求,灵活使用。
附七牛云上传图片的流程图:
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}