123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- <template>
- <div>
- <el-upload
- class="image-uploader"
- :action="`${path}/fileUploadAndDownload/upload`"
- :headers="{ 'x-token': token }"
- :show-file-list="false"
- :on-success="handleImageSuccess"
- :before-upload="beforeImageUpload"
- :multiple="false"
- >
- <img v-if="imageUrl" :src="showImageUrl" class="image">
- <i v-else class="el-icon-plus image-uploader-icon" />
- </el-upload>
- </div>
- </template>
- <script>
- const path = import.meta.env.VITE_BASE_API
- import { mapGetters } from 'vuex'
- import ImageCompress from '@/utils/image'
- export default {
- name: 'UploadImage',
- model: {
- prop: 'imageUrl',
- event: 'change'
- },
- props: {
- imageUrl: {
- type: String,
- default: ''
- },
- fileSize: {
- type: Number,
- default: 2048 // 2M 超出后执行压缩
- },
- maxWH: {
- type: Number,
- default: 1920 // 图片长宽上限
- }
- },
- data() {
- return {
- path: path
- }
- },
- computed: {
- ...mapGetters('user', ['userInfo', 'token']),
- showImageUrl() {
- return (this.imageUrl && this.imageUrl.slice(0, 4) !== 'http') ? path + this.imageUrl : this.imageUrl
- }
- },
- methods: {
- beforeImageUpload(file) {
- const isRightSize = file.size / 1024 < this.fileSize
- if (!isRightSize) {
- // 压缩
- const compress = new ImageCompress(file, this.fileSize, this.maxWH)
- return compress.compress()
- }
- return isRightSize
- },
- handleImageSuccess(res) {
- // this.imageUrl = URL.createObjectURL(file.raw);
- const { data } = res
- if (data.file) {
- this.$emit('change', data.file.url)
- this.$emit('on-success')
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .image-uploader {
- border: 1px dashed #d9d9d9;
- width: 180px;
- border-radius: 6px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
- }
- .image-uploader {
- border-color: #409eff;
- }
- .image-uploader-icon {
- font-size: 28px;
- color: #8c939d;
- width: 178px;
- height: 178px;
- line-height: 178px;
- text-align: center;
- }
- .image {
- width: 178px;
- height: 178px;
- display: block;
- }
- </style>
|