美文网首页
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