6.element-ui 使用图片上传:
上传到服务器返回一个地址,地址写到form里
<el-upload
class="upload-demo"
ref="upload"
action="web/upload/img/yp/editor"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccessUpload"
list-type="picture-card"
multiple
:file-list="newList"
:before-upload="beforeAvatarUpload" >
<i class="el-icon-plus"></i>
</el-upload>
methods: {
// 图片上传前验证
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("上传图片大小不能超过 2MB!");
}
return isLt2M;
},
//上传成功服务器
handleSuccessUpload(response, file, fileList) {
//response里有返回的图片地址
console.log(response, file, fileList);
this.newfileList.push(response.data);
},
//移除图片
handleRemove(file, fileList) {
console.log(file, fileList);
},
//预览图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
}
//添加时先清空newList
表格里this.form.pictureInfo = this.newList