- 使用element-ui中的el-upload上传图片
HTML:
<el-upload
class="avatar-uploader"
:headers="uploadHeader"
:action="UploadUrl()"
:show-file-list="false"
:on-error="uploadFail"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="addShufflingUrl" :src="addShufflingUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
data () {
return {
uploadHeader:{token:"5a041e7fc9da52000e1c5278"}
}
},
JS:
// 上传接口
UploadUrl:function(){
return this.testDomain+"/images";
},
// 上传之前
beforeAvatarUpload(file) {
// 图片的类型
const imgType = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
// 图片的大小
const imgSize = file.size / 1024 > 200 && file.size / 1024 < 500;
if (imgType != true) {
this.$message({message: "图片上传的格式不正确,中止上传", type: "warning"});
}
if (!imgSize) {
this.$message({message: "图片的大小必须在 200KB - 500KB 之间", type: "warning"});
}
return imgType && imgSize; // 若返回false，则中止上传
},
// 图片上传成功
handleAvatarSuccess(res, file) {
this.addShufflingUrl = res.url;
},
// 图片上传失败
uploadFail(err, file, fileList){
if(JSON.parse(err.message).code >= 400000){
alert(JSON.parse(err.message).code +" "+ " " + JSON.parse(err.message).message);
}
},
注意：
1. :headers="uploadHeader"为上传时需要在请求头里边添加上对应的token。
uploadHeader:{token:"5a041e7fc9da52000e1c5278"}为对应的token的值。
- UploadUrl为上传接口，方便全局定义url时候调用
