上传图片 - 码农教程

前端上传图片的原理是：运用<input type=“file” />的标签获取图片信息（file），传给后台，完成上传。

需要页面展示图片的话，可以从接口返回图片地址，放在<img />中

<input type="file" onChange={() => { this.handleUpload(ev.target) }} />

<input type=“file” />的样式不好设置，很难满足样式需求，网上提供几种解决办法，比较好的是设置样式 opcity = 0，使其定位覆盖在按钮之上。

我在开发中觉得依旧不是很好，于是就有了下面的代码：

uploadClick = async () => {
  const newFile = document.createElement("input");
  newFile.setAttribute("type", "file");
  newFile.addEventListener("change", () => { this.handleUpload(newFile) });
  await newFile.click();
  await newFile.remove();
}
handleUpload = (newFile) => {
  const file = newFile.files[0]; // 图片的信息(图片的名称，等)
  fetch("http://xxxx.xxx", { // 发起请求
    method: "post",
    body: {
      "multipartFile": file
    },
    Headers: {
      "userToken": "xxxxxx", // 与后端商量好的请求头
      "......": "......"
    }
  }).then(res => {
    if (res.status !== 200) {
      console.log("上传失败", res)
    } else {
      onsole.log("上传成功", res) // 接口返回图片地址，把地址给到 <img src={res.url} /> 进行展示
    }
  })
}

从上面的代码，我们能拿到图片的链接地址，和名称，渲染到页面上就完成了一次上传图片，并且显示

参考文档：雪旭：https://www.cnblogs.com/zimengxiyu/p/11359053.html

原文地址：https://www.cnblogs.com/MrZhujl/p/12726955.html