vue-评论、input上传图片

前端基于YDUI框架开发

<template>
    <div class="discuss">
        <div style="">
            <yd-cell-group>
                <yd-cell-item>
                    <yd-textarea
                        slot="right"
                        placeholder="发布你的晒图，最多1000字哦..."
                        maxlength="140"
                        v-model="value1"
                    ></yd-textarea>
                </yd-cell-item>
            </yd-cell-group>
            <ul style="padding: 0.2rem 0.25rem;;display: flex;border-top: 1px solid #eaeaea">
                <li class="discussImg discussImgAdd">
                    ＋
                    <input
                        name="file"
                        type="file"
                        class="upload"
                        accept="image/png,image/gif,image/jpeg,image/jpg"
                        @change="uploadAvatar($event)"
                    />
                </li>
                <li
                    class="discussImg"
                    v-for="(item, key) in circleArr2"
                >
                    <img
                        :src="item"
                        class="discussImg1"
                        alt=""
                    >
                </li>
            </ul>
        </div>
        <div class="tijiao" @click="pinlun">提交</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value1:'',
                img:[],
                storeXq1:{},
                circleArr2: [],
            }
        },
        methods: {
            doinfo (e,a,b) {
                var data = {
                    'store_id': e,
                    'longitude': a,
                    'latitude': b,
                }
                this.$api.shuStoreXq(data, res => {
                    this.storeXq1 = res.data
            })
            },
            pinlun () {
                var data = {
                    'store_id': this.id,
                    'comment': this.value1,
                    'type': 2,
                    'score': this.rate7,
                    'is_dis': 1,
                    'images': this.circleArr2,
                }
                console.log(this.value1)
                this.$api.pinlun(data, res => {
                    this.pinlunList = res.data;
                    // console.log("写评论",res.data)
                })
                if(this.value1 != ''){
                    // console.log('提交',this.value1)
                    this.$router.push({path: '/shuStoreDetail', query: {store_id:this.id}});
                }
            },
            uploadAvatar(e) {
                let file = e.target.files[0];
                let param = new FormData();
                param.append("upfile", file, file.name);
                this.$api.uploadFile("image", param, res => {
                    if (res.status) {
                    let avatar = res.data.url; // 上传成功的图片地址
                    this.circleArr2.push(avatar);
                }
            });
            },
        },
        created () {
            this.id = this.$route.query.store_id
            this.doinfo(this.$route.query.store_id,30.539228,104.062474)
        },
    }
</script>
<style scoped>
    /deep/ .yd-cell:after{
        height: 0;
         0;
        border-bottom: none;
    }
    .tijiao{
         100%;
        height: 1rem;
        background-color: #d4b058;
        color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        font-size: 0.3rem;
        line-height: 1rem;
    }
    .yd-cell:after{
        height: 0;
         0;
    }
    .yd-cell-box{
        margin-bottom: 0;
    }
    .yd-cell-right{
        padding-right: 0;
    }
    .discussImg{
         1rem;
        height: 1rem;
        border-radius: 5px;
        margin-right: .15rem;
    }
    .discussImgAdd{
        border: 1px dashed #eaeaea;
        color: #dedede;
        line-height: 1rem;
        font-size: .4rem;
        font-family: 宋体;
    }
    .discussImg img{
         100%;
        height: 100%;
    }
    /deep/ .yd-cell-box {
        margin-bottom: 0;
    }
    .discussImg {
         1rem;
        height: 1rem;
        border-radius: 5px;
        margin-right: 0.15rem;
        position: relative;
    }
    .discussImgAdd {
        border: 1px dashed #eaeaea;
        color: #dedede;
        line-height: 1rem;
        font-size: 0.4rem;
        font-family: 宋体;
        position: relative;
    }
    .discussImg1 {
         1rem;
        height: 1rem;
    }
    .upload {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
         1rem;
        height: 1rem;
    }
</style>