简单实现原生图片上传

react前端实现：

<div className="bj-img">
    //绑定上传控件，将功能赋值给img和span
    <label htmlFor="upload-input">
       <img src={imgs} alt="111"/><br />
       <span className="bj-imgtxt">点击更换头像</span>
    </label>
    //打开本地资源库
     <input
      id="upload-input"
      type="file"
      style={{display:'none'}}
      onChange={handleFileChange}
     />
</div>

前端定义的方法：

 const [selectedFile, setSelectedFile] = useState(null);

 const handleFileChange = (e) => {
      // 获取选定的文件
     const file = e.target.files[0];
     setSelectedFile(file)
     console.log('上传的文件:', file);
}

 const onFinish = async (values) => {
      if(SelectedFile){
        const formData = new FormData();
        formData.append('file', selectedFile);
        fetch('你的接口', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                console.log('图片上传成功:', data);
                // 在这里处理图片上传成功后的逻辑
            })
            .catch(error => {
                console.error('图片上传失败:', error);
                // 在这里处理图片上传失败后的逻辑 
            });
        }
    }

后端定义的方法：

什么是 CORS？
跨源资源共享 (CORS) 是一种浏览器机制，允许网页使用来自其他页面或域的资产和数据。

同源是最安全的策略类型，可防止访问任何外部服务器。站点的所有资产必须来自同一来源。大多数时候，同源是一个不错的选择，因为大多数脚本只能使用本地资源。但是，有时我们会希望允许访问外部资产，例如视频、直播或图片。

为保证用户信息的安全，所有的浏览器都遵循同源策略。

同源是指"协议+域名+端口"三者都相同，有任何一个不同时，浏览器都视为非同源。

第一步：安装cors跨源资源共享

npm i cors  //安装命令

var cors=require('cors')  //在app.js中引入

var app = express();  //实例（不用写的）

app.use(cors())  //在上一行的app下引入

第二步：创建一个upload文件夹

第三步：在app.js中配置静态文件存放位置

app.use("/upload",express.static("upload"))  //存放于upload文件夹中

第四步：以下在router.js文件中编辑接口 

router.post('/imgs',(req,res)=>{
    let form=new multiparty.Form()
    form.uploadDir="upload"
    form.parse(req,function(err,formdat,imgdat){
        var urls="http://localhost:3001/"+imgdat.file[0].path
        console.log('111',urls);
        res.send({
            code:200,
            urls
        })
    })
})