vue输出html（Vue3中通过 input 标签 发送文件/图片给后端）

一；设置 input 标签 

<input type="file" ref="fileInput" @change="handleFileChange"/>

1.将 input 标签的 type 属性设置为 file    
    
    
    
 。

使用 type="file" 的 <input> 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上    
    
    
    
，或者通过 Javascript 的 File API 对文件进行操作


     


     


     


     。

2.绑定 ref 绑定并获取该标签的DOM节点 




 




 




 




。

type="file" 的 <input> 元素身上存在一个 files 属性    


     


     


     


 ，其中包含了所有已选择的文件




 




 




 




 ，其值是一个伪数组   

   

   

   

。

3.绑定事件   

   

   

   

，处理文件/图片上传的后续逻辑

     

     

     

     。

二；通过 FormData 实例对象处理 二进制 文件/图片（以下代码展示上传一张图片）
  




  




  




  



。

// 上传之前要处理一下文件 因为文件是二进制的     

     

     

     

，要利用 FormData 实例对象进行处理 const formData = new FormData(); // append方法把文件添加到 FormData实例对象中 第一个参数：文件名 第二个参数：要上传的文件 formData.append("smfile", files[0]);

三；获取 input 节点的 files 属性以及上传文件/图片的业务逻辑与请求发送都放在了 input 事件回调函数中进行  


  


  


  


。

由于是发送二进制数据




  




  




  




  ，所以发送请求时头部字段 Content - type 要设置成 multipart / form-data

// input 发生改变时触发的回调函数 --- 验证上传的文件是否合法
  


  


  


  

，然后处理文件并发送请求 const handleFileChange = (e: Event) => { const currentTarget = e.target as HTMLInputElement; if (currentTarget.files) { // 将input身上的files对象转换为数组类型 const files = Array.from(currentTarget.files); // 如果有上传限制     
     
     
     
，则对文件进行判断 if (props.beforeUpload) { // 调用判断文件是否合法的函数---由父组件自定义设置 const result = props.beforeUpload(files[0]); // 如果不合法就直接返回出去 if (!result) return; } // 上传的文件符合要求 // 上传成功之前 




   




   




   




  ，把上传文件状态改为 loading fileStatus.value = "loading"; // 上传之前要处理一下文件 因为文件是二进制的

 



 



 



 

，要利用 FormData 实例对象进行处理 const formData = new FormData(); // append方法把文件添加到 FormData实例对象中 第一个参数：文件名 第二个参数：要上传的文件 formData.append("smfile", files[0]); // 发送异步请求上传文件 // 因为发送的二进制格式文件 所以要额外设置请求头 axios .post(yes/api/v2/upload, formData, { headers: { "Content-Type": "multipart/form-data", "Authorization":"CiKs2eatBnpdzNJ58T", }, }) .then((res) => { // 图片上传成功 if(res.data.code == success) { // 存储成功的返回结果 uploadedData.value = res.data.data.url; }else { uploadedData.value = res.data.images; } // 请求发送成功 修改上传文件状态 fileStatus.value = "success"; // 把获取到的图片url传给父组件 context.emit(getImageUrl,uploadedData.value); }) .catch((e) => { console.log(图床上传,e); fileStatus.value = "error"; }) .finally(() => { if (fileInput.value) { fileInput.value.value = ""; } }); } };