element-ui上传图片的详解

需求：element-ui实现上传头像。效果图：

先查看element-ui上传图片的示例：

https://element.eleme.cn/#/zh-CN/component/upload

<el-form :model="form" :rules="rules" ref="form" label-width="100px">
			
				<div class="deviceinfo-box">
					<div class="deviceinfo-box-item">
						<el-upload class="teacher_el_upload" :action="upurl" :headers="upheaders" :limit="1" list-type="picture-card"
						 :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :on-error="handleError"
						 :file-list="fileList" :class="{ disabled: uploadDisabled }" ref="upload">
							<span class="teacher_el_upload_btn" @click="submitUpload">上传照片</span>
							<span class="teacher_el_upload_title" v-if="fileList==''">暂无照片</span>
						</el-upload>
					</div>
			</el-form>

先来写上传图片的按钮函数：

submitUpload() {
				this.$refs.upload.submit()
			},

 

 

利用submit实现手动上传。

 在data中注册upurl,你要上传的接口，

 这里应该是登录时就储存的key和value，可以直接通过localStorage.getItem('AuthorizationToken')获取到value值。在data中注册：

 

设置了“允许最大上传个数”是1，当上传完一张图片之后，要将上传图片的图标设置为禁用。

在data中注册以下：

dialogImageUrl: '',
dialogVisible: false,

methods中方法：

handleError(err, file, fileList) {
				this.$message({
					message: '上传失败！',
					type: 'success'
				});
				console.log(err);
			},
			handleSuccess(response, file, fileList) {
				// console.log("file",file);
				this.fileList = fileList;
				console.log(fileList);
				if (fileList.length >= 1) {
					this.uploadDisabled = true;
				}
				this.form.photo = file.response.data;
				this.$message({
					message: '上传成功！',
					type: 'success'
				});
			},
			handleRemove(file, fileList) {
				this.fileList = [];
				this.form.photo = '';
				this.uploadDisabled = false;
			},
			handlePreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},

data中全部注册的：

                dialogImageUrl: '',
				dialogVisible: false,
				uploadDisabled: false,
				upurl: '上传的地址',
				upheaders: {
					Authorization: localStorage.getItem('AuthorizationToken')
				},
				fileList: [],