Day 176/200 Ant Design 上传文件如何加token?

前言

今儿遇到了带宽上传文件的攻击(每秒150M+),导致了服务宕机1.5h。排查发现,上传文件没有token的参数。

1、需求

上传组件添加token

2、为什么要添加token?

1)因为可以阻拦非平台请求;

2)平台内请求如果异常,可以禁用那个用户;

3、添加组件headers参数

1)页面组件
<a-upload-dragger
  v-model:fileList="file"
  name="file"
  :action="apiLink"
  :beforeUpload="beforeUploadFile"
  :headers="requestHeaders"
  @change="handleChange"
>
  <p class="ant-upload-drag-icon">
    <inbox-outlined></inbox-outlined>
  </p>
  <p class="ant-upload-text">
    点击或拖拽到区域上传
  </p>
</a-upload-dragger>
2)header 传 token
data(){
	requestHeaders: {
      Authorization: 'Bearer ' + token //页面token
    },
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ant design vue 中上传图片时,可以通过配置 token 和其他参数来实现。首先,在上传组件中设置 action 属性为上传图片的接口地址。然后,通过 headers 属性设置 token 参数,使其与图片一起发送到服务器。具体步骤如下: 1. 导入需要的组件:在组件中首先导入 Upload 组件和 message 组件,用于实现上传图片和提示消息。 ```javascript import { Upload, message } from 'ant-design-vue'; ``` 2. 定义上传图片的接口地址和要传递的其他参数: ```javascript const uploadUrl = 'your_upload_api_url'; const token = 'your_token'; const otherParams = { param1: 'value1', param2: 'value2', }; ``` 3. 在模板中使用 Upload 组件,并配置上传图片的相关属性: ```html <template> <div> <Upload action="{{uploadUrl}}" :headers="{ Authorization: token }" :data="otherParams" :on-success="handleUploadSuccess" :on-error="handleUploadError" > <button>选择文件</button> </Upload> </div> </template> ``` 4. 处理上传成功和失败的回调函数: ```javascript methods: { handleUploadSuccess(response) { // 上传成功后的逻辑处理 message.success('上传成功'); }, handleUploadError(error) { // 上传失败后的逻辑处理 message.error('上传失败'); }, }, ``` 以上是使用 ant design vue 实现上传 token 和其他参数的图片的步骤。通过配置 action、headers 和 data 属性,即可将 token 和其他参数一起发送到服务器。在上传成功和失败的回调函数中,可以添相应的逻辑处理和提示消息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值