# 图片上传

          <div class="bg-white mt10">
            <yoga-info-item label="商品图片">
              <label>
                <img src="/assets/icon/ico-camera.gif"
                     style="width: 21px;height: 19px;"/>
                <input type="file" style="display: none;" accept="image/*" @change="imgUpload.add($event)" multiple>
              </label>
            </yoga-info-item>
            <div class="text-left pd10">
              <span v-for="(img,index) of imgUpload.data" :key="img.id" @click="delImg(img,index)" class="preview"><img
                :src="img.src" class="hw44"/></span>
            </div>
          </div>

  import Config from '@/config'
  import {Ajax, layer, ImgUpload} from 'sjfx';

  export default {
    components: {YogaInfoItem, FiveStar},
    data() {
      return {
        cp: {},
        visible: false,
        form: {
          comment: '',
          star: 5,
          anonymity: false,
          orderCpId: undefined,
        },
        imgList: [],
        imgUpload: new ImgUpload({
          url: Config.mallService + '?action=comment_upload',
          max: 9
        })
      }
    },
    created() {
      this.imgUpload.onFinish = () => {
        this.save();
      };
      this.imgUpload.onUploadSuccess = (item, file) => {
        if (item.success) {
          this.imgList.push({
            imgUrl: item.imgUrl,
            thumbnail: item.thumbnail,
          });
        }
      }
    },
    methods: {
      show(cp) {
        this.comment = '';
        this.star = 5;
        this.cp = cp;
        this.form.orderCpId = cp.id;
        this.imgList = [];
        this.visible = true;
      },
      cancel() {
        this.visible = false;
      },
      submit() {
        if (this.form.comment.length === 0) {
          layer.error('评论不能为空');
          return;
        }
        layer.loading('数据提交中');
        this.imgUpload.upload();
      },
      save() {
        layer.hideLoading();
        this.form.imgs = this.imgList;
        Ajax.postJson(Config.mallService + '?action=comment_save', this.form).then(() => {
          this.cp.hasComment = true;
          this.visible = false;
          layer.toast('评论成功!');
          this.imgUpload.data = [];//清理变量
          this.imgList = [];//清理变量
        });
      },
      delImg(item, index) {
        layer.confirm('确实要取消该图片的上传吗?').then(() => {
          this.imgUpload.data.splice(index, 1);
        }).catch(() => {
        });
      }
    }
  }
Last Updated: 1/14/2020, 12:00:52 PM