element-ui的Upload上传中action发送请求的问题

最新推荐文章于 2024-05-08 20:05:02 发布

原创最新推荐文章于 2024-05-08 20:05:02 发布 · 5.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

功能专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用Vue框架实现资源上传功能，包括设置上传URL、处理token失效问题、阻止自动上传及手动提交等操作。

需求：(post请求)

问题：
1、action必填项
2、token失效
3、请求两次

解决如下：

<template>
  <div>
    <el-form  label-width="80px">
      <el-form-item label="资源上传:">
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="uploadUrl()"//获取url
          :headers="{Token: token}" //传递token的方式
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :data="{description:ruleForm.description,type:ruleForm.type}" //data传递其他参数，对象中的值是key：value模式
          :auto-upload="false"//阻止自动上传图片
          >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        </el-form-item>
        <el-form-item>
	        <el-button type="primary">取消</el-button>
	        <el-button @click="submitUpload">确认</el-button>//手动提交
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import store from '@/store'
export default {
  data() {
      return {
        token: store.getters.token //获取token
      }
    },
    methods:{
    //action的url
      uploadUrl(){
        return `${process.env.VUE_APP_BASE_API}/resource/add`//需要区分环境所以用process.env.VUE_APP_BASE_API获取基本域名/ip
      },

      //上传提交
      submitUpload() {
        this.$refs.upload.submit();
      },
      handlePreview(file) {
        console.log('=====',file);
      },
      handleRemove(file) {
        console.log(file);
      },
    }
}
</script>