elui实现多张图片上传

原创

用户6493868

发布于 2022-03-08 07:15:21

1.2K0

发布于 2022-03-08 07:15:21

文章被收录于专栏：vue封装H5

效果图

实现步骤

<el-form-item label="产品图" prop="imgurls">
          <el-upload
            class="avatar-uploader"
            action=""
            :limit="3"
            :http-request="getFile"
            :show-file-list="false">
            <div v-for="(item, index) in form.imgurls">
              <img v-if="item" :src="item" class="avatar">
            </div>
            <i v-if="form.imgurls.length < 3" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

limit属性可以限制上传图片的数量

getFile2(item) {
        this.file = item.file
        let formData = new FormData();
        formData.append("file", this.file);
        uploadFile(formData).then(response => {
          this.msgSuccess("商品icon图上传成功！");
          this.form.icon = response.data.imgShowUrl;
          console.log(this.form.icon)
        });
      },

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

limit