效果图
实现步骤
el-upload的使用
代码语言:javascript
复制<el-form-item label="图片" prop="imgurl">
<el-upload
class="avatar-uploader"
action=""
:http-request="getFile"
:show-file-list="false">
<img style="width: 100%; height: 100%" v-if="form.imgurl" :src="form.imgurl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
js方法实现
代码语言:javascript
复制getFile(item) {
this.file = item.file
let formData = new FormData();
formData.append("file", this.file);
uploadFile(formData).then(response => {
this.msgSuccess("图片上传成功");
this.form.imgurl = response.data.imgShowUrl;
});
},