vue+elementUI图片上传

最新推荐文章于 2024-08-12 10:43:21 发布

Adonis_D_Gogh

最新推荐文章于 2024-08-12 10:43:21 发布

阅读量2.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Adonis_D_Gogh/article/details/80177936

版权

前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

1、html


<el-form-item label="图片" prop="logo">
	<el-upload name="file" v-if="optype==0" 
	        :action="'/upload'" 
	        accept=".jpg, .png" 
	        list-type="picture-card" 
	        :file-list="fileLists" 
	        :on-preview="handlePictureCardPreview" 
	        :on-success="success" 
	        :on-remove="handleRemove">
	    <i class="el-icon-plus"></i>
	</el-upload>
	<!--大图弹出框-->
	<el-dialog :visible.sync="imgDialogVisible" size="full" :modal="false" title="查看大图片">
		<img width="100%" :src="dialogImageUrl" alt="">
	</el-dialog>
</el-form-item>

2、定义

dialogImageUrl: '', 
imgDialogVisible: false, 
fileLists: [],

3、在需要使用的方法中给fileLists[]赋值

vm.fileLists = [];
if (row.logo != undefined && row.logo != "") {
	 vm.fileLists.push({url:row.logo});
}

4、其他几个属性的方法

//删除图片
handleRemove(file, fileList) {
	this.form.logo=''
},
//查看大图
handlePictureCardPreview(file) {
	this.dialogImageUrl = file.url;
	this.imgDialogVisible = true;
},
//图片上传成功
success(response, file, fileList) {
	this.fileLists = [];
	this.fileLists = [file]
	this.form.logo = file.response.result;
},

5、图片上传的位置和路径是存在不同的表中。