| | |
| | | :close-on-click-modal="false" |
| | | title="上传图片" |
| | | :visible.sync="updateImg" |
| | | width="800px" |
| | | width="1000px" |
| | | class="icon-dialog-wrapper dialong-com-style"> |
| | | <ImageCropper ref="iconShot" v-if="updateImg" :imgSrc="img" > |
| | | </ImageCropper> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="updateImg = false">取 消</el-button> |
| | | <el-button type="primary" @click="uploadIcon">确 定</el-button> |
| | | <el-button v-if="loading">取 消</el-button> |
| | | <el-button v-else @click="updateImg = false">取 消</el-button> |
| | | <el-button :loading="loading" type="primary" @click="uploadIcon">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | }, |
| | | data () { |
| | | return { |
| | | loading: false, |
| | | fileInfo:{}, |
| | | img: null, |
| | | updateImg: false, |
| | |
| | | { type: this.fileInfo.type } // 设置File类型的文件类型 |
| | | ) |
| | | ) |
| | | this.loading = true |
| | | upload(formData).then(res => { |
| | | this.loading = false |
| | | console.log(res) |
| | | this.file.imgurl = res.imgaddr |
| | | this.file.imgurlfull = res.url |
| | |
| | | this.updateImg = false |
| | | this.$emit('uploadSuccess', { imgurl: res.imgaddr, imgurlfull: res.url, name: res.originname }) |
| | | this.$emit('uploadEnd') |
| | | }, () => { |
| | | this.loading = false |
| | | }) |
| | | }) |
| | | }, |
| | |
| | | // 上传图片 |
| | | openUpdateIcon (file, fileList) { |
| | | const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' |
| | | const isLt2M = file.size / 1024 / 1024 < 2 |
| | | const isLt2M = file.size / 1024 / 1024 < 5 |
| | | if (!isJPG) { |
| | | this.$message.error('上传头像图片只能是 JPG/PNG 格式!') |
| | | return false |
| | | } |
| | | if (!isLt2M) { |
| | | this.$message.error('上传头像图片大小不能超过 2MB!') |
| | | this.$message.error('上传头像图片大小不能超过 5MB!') |
| | | return false |
| | | } |
| | | // 上传成功后将图片地址赋值给裁剪框显示图片 |