vue单个图片上传编辑

2021-12-23  本文已影响0人  秀萝卜
<div class="uploads">
    <div class="upload">
        <el-upload action="#" :auto-upload="false" list-type="picture-card" accept=".jpg, .jpeg, .png" :file-list="fileList1" :limit="1" :on-change="handleSuccess1" :on-remove="handleRemove1">
            <i slot="default" class="el-icon-plus"></i>
        </el-upload>
    </div>
    <div class="upload">
        <el-upload action="#" :auto-upload="false" list-type="picture-card" accept=".jpg, .jpeg, .png" :file-list="fileList2" :limit="1" :on-change="handleSuccess2" :on-remove="handleRemove2">
            <i slot="default" class="el-icon-plus"></i>
        </el-upload>
    </div>
</div>

           // 图片使用
            fileList1: [],
            fileList2: [],
            imageUrl1: '',
            imageUrl2: '',
            imageOk1: '',
            imageOk2: '',



        handleRemove1(file, fileList) {
            this.imageUrl1 = ''
            this.imageOk1 = ''
        },
        handleSuccess1(file, fileList) {
            const isLt300K = file.raw.size / 1024 < 300;
            if (!isLt300K) {
                this.$message.error("上传图片大小不能超过300K!");
                this.fileList1 = []
                return;
            }
            this.imageUrl1 = file
        },
        handleRemove2(file, fileList) {
            this.imageUrl2 = ''
            this.imageOk2 = ''
        },
        handleSuccess2(file, fileList) {
            const isLt300K = file.raw.size / 1024 < 300;
            if (!isLt300K) {
                this.$message.error("上传图片大小不能超过300K!");
                this.fileList2 = []
                return;
            }
            this.imageUrl2 = file
        },


        echoImage(item) {
            if (item.frontImg) {
                this.imageOk1 = item.frontImg
                this.fileList1[0] = {
                    url: item.frontImg
                }
            }
            if (item.backImg) {
                this.imageOk2 = item.backImg
                this.fileList2[0] = {
                    url: item.backImg
                }
            }
        },
        // 提交时,将图片上传oss
        async getImage() {
            if (this.imageUrl1) {
                this.imageOk1 = await Util.saveOssUrl(this.imageUrl1)
            }
            if (this.imageUrl2) {
                this.imageOk2 = await Util.saveOssUrl(this.imageUrl2)
            }
        },
上一篇下一篇

猜你喜欢

热点阅读