Vue中使用input简易的上传图片

偏执的太偏执、 2022-10-07 12:59 277阅读 0赞

![在这里插入图片描述][20210618111438568.png]

<div class="boximg">
                  <div class="topimg">
                    
                  </div>
                  <div class="botimg" @click="imgClick()">上传logo</div>
     </div>
     <div class="box_img_bottom">
                  
                  <div class="input" @click="imgClick()"></div>
                  <input style="float: left; display: none" type="file" id="uploadFile" accept="image/*" @change="readLocalFile()" />
    </div>

// 上传图片

> filePath: “”,

//图片上传
        imgClick() { 
          document.getElementById("uploadFile").click();
        },
        //点击选中图片
        readLocalFile() { 
          var param = new FormData();
          let files = event.target.files[0];
          param.append("file", files, files.name);  // append 中的 字符串名称 根据后端接口提示修改
          console.log(files);
          try { 
            new Promise((resolve, reject) => { 
              ProjectList.uploadImage(param)
                .then((response) => { 
                console.log(response);
                })
                .catch((error) => { 
                  reject(error);
                });
              // 文本删除
              document.getElementById("uploadFile").value = null;
            });
            event.target.value = " ";
          } catch (error) { }
        },

[20210618111438568.png]: /images/20221005/aae08fe129d84e19b4523c35ec538d80.png