美文网首页
vue单个图片上传编辑

vue单个图片上传编辑

作者: 秀萝卜 | 来源:发表于2021-12-23 13:43 被阅读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)
            }
        },

相关文章

网友评论

      本文标题:vue单个图片上传编辑

      本文链接:https://www.haomeiwen.com/subject/cvphqrtx.html