Element-UI中的el-upload插件上传文件action和headers参数

官网给的例子action都是绝对地址,我现在需要上传到自己后台的地址,只有一个路由地址/task/upload

根据 config/index.js配置,那么action要写成/api/task/upload,另外也可以传入函数来返回地址:action="uploadUrl()"

另外一个问题就是此插件不会默认带上token,需要手动传递。

<el-upload class="upload-demo" 
	action="/api/task/upload" 
	:multiple="false" 
	name="jarfile" 
	:file-list="fileList"
  	accept="application/java-archive" 
  	:on-success="onUploadSuccess" 
  	:headers="{'Auth-Token': tokenValue}">
  	
  <el-button size="small" type="primary">点击上传</el-button>
  <span slot="tip" class="el-upload__tip" style="margin-left: 10px;">不要重复上传文件,按需上传</span>
</el-upload>

<script>

import store from '@/store'

export default {
  data() {
    return {
      tokenValue: store.getters.user.token,
      fileList: []
    }
  },
  computed: {},
  components: {},
  created() {},
  methods: {
    
    onUploadSuccess(response, file, fileList) {
      this.fileList = []
      if (response.code === 0) {
        this.form.command = response.data
        // this.fileList = [{ name: response.data, url: response.data, status: 'success' }]
      } else {
        this.$message.error(response.message)
      }
    }
  }
}
</script>
  • 10
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UIel-upload 组件本身并不支持分片上传,但是我们可以通过使用第三方库来实现分片上传的功能。 一种常见的方案是使用 axios 库来进行文件上传,并在上传时使用 axios 的分片上传功能。axios 库已经内置了分片上传的支持,我们可以使用 axios 的 `axios.post` 方法来上传文件,并使用 `onUploadProgress` 方法来监听上传进度。 首先,我们需要在项目安装 axios 和 element-ui: ``` npm install axios element-ui --save ``` 然后,我们可以在组件使用 el-upload 组件来上传文件,如下所示: ```html <template> <el-upload class="upload-demo" ref="upload" :action="uploadUrl" :headers="headers" :on-success="handleSuccess" :on-error="handleError" :on-progress="handleProgress" :file-list="fileList" :limit="limit" :multiple="multiple" :data="formData" :auto-upload="autoUpload" :show-file-list="showFileList" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> ``` 其,我们需要设置 `action` 属性为文件上传的接口地址,同时需要设置 `on-success`、`on-error` 和 `on-progress` 等事件来处理上传成功、上传失败和上传进度。 接下来,我们可以在组件的 `mounted` 钩子函数初始化 axios 并设置分片大小: ```js import axios from 'axios'; export default { name: 'UploadDemo', data() { return { fileList: [], uploadUrl: 'http://example.com/upload', limit: 3, multiple: true, formData: {}, autoUpload: true, showFileList: true, headers: {}, chunkSize: 5 * 1024 * 1024 // 5MB }; }, mounted() { axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; axios.defaults.timeout = 60000; // 超时时间 axios.defaults.retry = 3; // 重试次数 axios.defaults.retryDelay = 1000; // 重试间隔 // 设置分片大小 axios.defaults.maxContentLength = this.chunkSize; axios.defaults.maxBodyLength = this.chunkSize; }, methods: { // 上传文件 handleUpload(file) { const formData = new FormData(); formData.append('file', file); return axios.post(this.uploadUrl, formData, { headers: this.headers, onUploadProgress: progressEvent => { const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); console.log(percentCompleted); } }); }, // 上传成功回调 handleSuccess(response, file, fileList) { console.log('上传成功:', response); }, // 上传失败回调 handleError(error, file, fileList) { console.log('上传失败:', error); }, // 上传进度回调 handleProgress(event, file, fileList) { console.log('上传进度:', event.percent); } } }; ``` 在 `handleUpload` 方法,我们使用 axios 的 `post` 方法来上传文件,并设置了 `onUploadProgress` 方法来监听上传进度。在 `mounted` 钩子函数,我们设置了 axios 的默认参数,包括超时时间、重试次数、重试间隔和分片大小等。 需要注意的是,由于 el-upload 组件不支持分片上传,因此我们需要手动控制上传的文件数量,以避免同时上传过多的文件导致服务器崩溃。我们可以通过设置 `limit` 属性来控制上传的文件数量,例如设置为 3 表示一次最多只能上传 3 个文件。 另外,如果需要支持断点续传,我们需要在上传文件时记录已上传的文件块数量和位置,并在下次上传时从上次的位置继续上传。这部分内容比较复杂,需要根据具体的需求来实现,这里不再赘述。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值