element组件库使用笔记---上传图片+回显+预览1.0

<!-- 上传图片 -->
    <div style="display: flex">
      <p style="display: flex; align-items: center; font-size: 16px">分类图标：</p>
      <div class="commodity_img">
        <el-upload
          list-type="picture-card"
//上传路径，及接口
          :action="'/pcapi/index/upload'"
          :on-change="handleChange"
          :before-remove="beforeRemove"
//上传到那个数组里面，关乎到回显
          :file-list="file"
          multiple
//上传的图片数量
          limit="1"
//上传到那个数组里面，关乎到回显
          name="file"
//照片显示的数量
          :data-fileListCount="file.length"
        >
          <el-icon class="avatar-uploader-icon">
//图标
            <Plus />
          </el-icon>
        </el-upload>
      </div>
    </div>

const handleChange = (file) => {
  console.log(file);
  // let array = [];
  // // let obje = {};
  // console.log(files.value);
  // for (let i = 0; i < files._rawValue.length; i++) {
  //   array.push(files._rawValue[i].response.url);
  // }
  //完成后可以在添加或编辑上写入fileList.value.join(',')即可
};

//中转变量
 let immmg = [];
    // console.log(file);
//判断是否为后续添加的图片
    if (file.value[0].url.indexOf('http') == 0) {
//切割掉多余的字符
      immmg.push(file.value[0].url.slice(21));
//接口直接返回的，没有动过，所以直接push
    } else {
      immmg.push(file._rawValue[0].response.url);
    }
//提取出来url，因为手动添加是带有_rawValue的
    let arrays = [];
    // console.log(files.value);
    for (let i = 0; i < files.value.length; i++) {
      if (files.value[i].url.indexOf('http') == 0) {
        arrays.push(files.value[i].url.slice(21));
      } else {
        arrays.push(files._rawValue[i].response.url);
      }
    }