elementUI怎麼用上傳頭像元件upload
阿新 • • 發佈:2018-12-12
<el-upload class="avatar-uploader" action="123" :http-request="upLoad" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="headUrl" :src="headUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>
upLoad(file) { const formData = new FormData(); formData.append('file', file.file); console.log(file); this.$http.uploadHttp('/udb/api/v1/oss/fileUpload', formData).then((res) => { console.log(res); console.log('上傳成功'); if (res.data.code === 0) { this.successUrl = res.data.response; // 請求之後將返回的URL給修改的介面在進行一次修改請求 this.headUrl = res.data.response; // 請求成功之後賦給頭像的URL this.$message('頭像上傳成功'); this.$store.dispatch('person/setAvatar', this.successUrl); const obj = { headUrl: this.successUrl }; this.edit(obj); // this.getAccount(); } else { this.$message('頭像上傳失敗'); } }); },
// handleSuccess(file) { // console.log(file); // this.$store.dispatch('person/setAvatar', '頭像地址'); // }, handleAvatarSuccess(res, file) { this.headUrl = URL.createObjectURL(file.raw); }, beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isLt3M = file.size / 1024 / 1024 < 3; if (!isJPG) { this.$message.error('上傳頭像圖片只能是 JPG 格式!'); } if (!isLt3M) { this.$message.error('上傳頭像圖片大小不能超過 3MB!'); } return isJPG && isLt3M; },