代码
<el-upload
v-bind="uploadOption"
data="fileList"
:http-request="onFileUpload"
:on-remove="handleRemoveImg"
:file-list="fileList">
<i class="el-icon-plus"></i>
</el-upload>
data: {
uploadOption: {
accept: "image/*",
"on-preview": this.handlePictureCardPreview,
limit: 1,
multiple: false,
"list-type": "picture-card",
"on-exceed": this.onExceed,
"before-upload": this.beforeUpload
},
imgData: '',
}
methods: {
onFileUpload: function (e) {
var that = this;
return new Promise(function (resolve, reject) {
uploadImg(e.file, function (res) {
if (res) {
var url = 获取的图片路径 + 返回的七牛hash值
that.imgData = url;
var imgName = e.data
if (e.data == 'fileList') {
that.fileList = [{ name: imgName, url: url }]
}
resolve()
} else {
that.$message.error("图片上传失败")
reject()
}
});
});
},
onExceed: function () {
this.$message.error("只能选择一张图片")
},
beforeUpload: function (file) {
if (file.size >= 5120000) {
this.$message.error("图片大小过大,应小于5M!")
return Promise.reject()
}
},
handleRemoveImg: function (file, fileList) {
this.imgData = ""
this.fileList = [];
},
}