el-upload上传、回显增、删、

<el-upload
                  :http-request="UploadFile"
                    action="#"
                    list-type="picture-card"
                    :auto-upload="true"
                    ref="upLoad"
                    :file-list="certificate"
                  >
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>

                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt />
                  </el-dialog>

                  <p class="jianyi">轮播图建议尺寸900*600</p>



 //上传轮播图
    UploadFile(param) {
     
      this.file = param.file;
      this.key = param.file.name;
      let form = new FormData();
      form.append("file", this.file);
      form.append("key", this.key);
      let config = {
     
        headers: {
      "Content-Type": "multipart/form-data" }
      };
      this.loading = true;
      API.GetFileUp(form, config).then(res => {
     
        this.loading = false;
        this.img_List.push(res.imgUrlPath);
      });
    },
 //删除轮播图
    handleRemove(file) {
     
      let Arr = this.$refs.upLoad.uploadFiles;
      let index = Arr.indexOf(file);
      this.img_List.splice(index, 1);
      let num = 0;
      this.$refs.upLoad.uploadFiles.map(item => {
     
        if (item.uid == file.uid) {
     
          this.$refs.upLoad.uploadFiles.splice(num, 1);
        }
        num++;
      });
    },
//回显
 res.data.picArr.forEach(element => {
     
            let obj = new Object();
            obj.url = element;
            this.certificate.push(obj);
          });

el-upload上传、回显增、删、_第1张图片

你可能感兴趣的:(vue,javascript,vue.js)