[JavaScript知识库]上传图片 upload

  <el-upload
        class="{hide:fileList2.length ===1}"
        class='strategy-upload'
        action=‘#’
        :on-change="(file,fileList2)=>{onChange(file,fileList2)}"
        :limit="limit2"
        :file-list="flileList2"
        list-type="picture-card"
        accept='.jpg'
        :auto-upload="false"
       >
      <div slot='default' class='icon'>
         <i class="el-icon-plus"> <br/><span>更换图片</span></i>
      </div>
      <div slot='tip'>只支持.jpg格式</div>
      <div slot='file' slot-scope="{file}">
         <img :src="file.url" alt=""
         style="object-fit: cover;"

         >
      </div>
      <span>
          <span @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
          <span 
          v-if='!disbaled'
          @click='handleRemove2(file)' 
          ><i class="el-icon-delete"></i></span>

      </span>
      </el-upload>
       <script>
          //获取接口图片数据并保存
          async  getList(){
              const res = await list()
              try{
                  if(res.data){
                    this.fileList2=[
                  {
                      url:res.data.coverImageUrl,
                      pictureUrl:res.data.coverImageUrl
                  }
              ]
                  }else{
                      this.fileList2=[]
                  }

              }catch(e){
                  consolt.loe(e)
              }
             
          }
        //删除图片
          handleRemove2(file){
              if(file.type !==2){
                  this.delist.push(file)
              }
              this.fileList2=[]
          }
          //预览图片
          handlePictureCardPreview(file){
              this.dialogImageUrl = file.url;
              this.dialogVisible = true
          }
          getBase64(file){
              return new Promise(function (resolve,reject){
                  let reader = new FileReader();
                  let imgResult = ""
                  reader.readAsDataUrl(file);
                  reader.onload = function(){
                      imgResult = reader.result;
                  }
                  reader.onerror = function (error){
                      reject (error)
                  }
                  reader.onloadend = function(){
                      resolve(imgResult)
                  }
              })
          },
          getBase64Image(img){
              let canvas = document.createElement('canvas');
              canvas.width = img.width;
              canvas.height = img.height;
              let ctx = canvas.getContext('2d');
              ctx.drawImage(img,0,0,img.width,img.height)
              let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
              let dataURL = canvas.toDataURL("image/" + ext);
              return dataURL
          },
          defultCoverImage(url){
              let img = url;
              let image = new Image();
              image.src = img;
              image.onload = () =>{
                  let base64 = this.getBase64Image(image);
                  this.defaultCoverImageUrl64 = JSON.parse(JSON.stringify(base64))
              }
          },
          onChange(file,fileList2){
              file.type = 2;
              let reader = new FileReader();
              this.getBase64(file.raw).then(res=>{
                  file.url = res
              })
              this.fileList2 = fileList2
          }
         
      </script>