Upload 图片上传

file-list		上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
action			必选参数，上传的地址
name			上传的文件字段名
limit			最大允许上传个数
auto-upload		是否在选取文件后立即进行上传
list-type		文件列表的类型text/picture/picture-card	

on-change		文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
on-preview		点击文件列表中已上传的文件时,可以获取到图片数据，用于查看

<el-form-item 
	label="上传证书" 
	:required="true" 
	label-width="120px">
	<el-upload 
		:file-list="fileList" 
		action 
		name="file" 
		:on-change="uploadCertificate" 
		:limit="1" 
		:auto-upload="false"
		 list-type="picture">
   		<el-button size="small" type="primary">上传证书</el-button>
    	<div slot="tip" class="el-upload__tip">*上传证书压缩包中的apiclient_key.pem文件</div>
	</el-upload>
</el-form-item>

data() {
    
    
	return {
    
    
		fileList:[]
	}
},
methods:{
    
    
	// 上传图片专用
	uploadCertificate(file) {
    
    
		this.files = file.raw
		var formData = new FormData()
		formData.append('file', this.files)
		http(formData).then(res => {
    
    
			if (res.code === 10000) {
    
    
				console.log('上传成功',res);
			}
		})
	},
}

list-type=text 文本展示

list-type=“picture” 缩略图展示

list-type=“picture-card”

如果需要放大查看图片：list-type 需要设置为 picture-card 或者picture
on-preview 点击已上传文件时获取到数据，用来查看

<el-upload :on-preview="handlePictureCardPreview" list-type="picture-card">
	<el-button size="small" type="primary">上传证书</el-button>
	<div slot="tip" class="el-upload__tip">*上传证书压缩包中的apiclient_key.pem文件</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
	<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

data(){
    
    
	return{
    
    
		dialogVisible:false,
	}
},
methods:{
    
    
	handlePictureCardPreview(file) {
    
    
		this.dialogImageUrl = file.url;
		this.dialogVisible = true;
	},
}