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

发布时间:2024年01月24日

官网给的例子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>
文章来源:https://blog.csdn.net/raoxiaoya/article/details/135826423
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。