el-upload上传之formdata携带参数

在vue中使用el-upload组件实现上传时想要调用自己写的上传接口方法，并自定义参数时，可按下面代码实现。我这块不走默认自动上传是因为想走封装的公共方法中的请求参数config.headers['Authorization']，后端要token验证。若没有特别要求的话默认自动上传就可直接将file参数给到后端，无需专门处理。

1. 使用默认自动上传接口一直返回失败，就是因为后端token没有验证通过返回的。

3. 携带了Authorization参数的请求，后端这时候就返回正常了。
   

4. 具体实现代码可参考以下：

<el-upload
      ref="uploadRef"
      v-model:file-list="fileList"
      multiple
      :on-preview="handlePreview"
      :http-request="uploadFile"
      :before-remove="beforeRemove"
    >
    <el-icon><Plus /></el-icon>
      上传
    </el-upload>

// 调用的上传接口方法
const uploadFile = async(file) => {
  try {
    proxy.$modal.loading("正在上传，请稍候...");
    const formData = new FormData();  
    formData.append('file', file.file); // 这块参数为file，可定义其他参数
    const res = await uploadFileOnly(formData); // uploadFileOnly这个是上面的request接口
    if(res.code === 200){
      proxy.$modal.msgSuccess("上传成功");
   }else {
      proxy.$modal.msgError(res.msg);
   }  
  } catch (error) {
    console.log(error)
  } finally {
    proxy.$modal.closeLoading();
  }
}

// 文件预览功能
const handlePreview = (file) => {
  if (file.raw.type.indexOf('image') === 0) {  
    const reader = new FileReader();  
    reader.onload = (e) => {  
      const imgUrl = e.target.result;  
      // 这里你可以使用 imgUrl 来做图片预览，比如在一个新的窗口或模态框中显示
      const newWindow = window.open('', '_blank');  
      newWindow.document.write(`<img src="${imgUrl}" style="width: 100%; height: auto; display: block; margin: 0 auto;">`);  
      newWindow.document.close(); // 关闭文档流，使得图片可以显示
    };  
    reader.readAsDataURL(file.raw); // 假设 raw 属性包含文件内容  
  } else {  
    // 对于非图片文件，你可能需要提供一个文件下载链接或者其它类型的预览  
    const url = URL.createObjectURL(file.raw);  
    window.open(url, '_blank'); // 假设 raw 属性包含文件内容  
    URL.revokeObjectURL(url); // 释放 URL 对象  
  }  
}