element-ui 使用upload上传文件并解决跨域问题

直接上案列吧！

<template>
 <div class="all">
      <el-upload class="upload-demo"
            name="upfile"
            drag
            action="123"
            :before-upload="beforeUpload"
            :on-success="onSuccess"
            :on-error="onError"
            multiple
            ref="newupload"
            :auto-upload="false"
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>     </div>
            <!-- <div class="el-upload__tip" slot="tip">请注意您只能上传.mp4 .flv .mov格式的视频文件</div> -->
          </el-upload>
           <div class="demo-input-suffix">
                  <el-input
                    placeholder="请输入项目id"
                    prefix-icon="el-icon-search"
                    v-model="project_id">
                  </el-input>
                  <br>
                  <el-input
                    placeholder="请输入版本号"
                    prefix-icon="el-icon-search"
                    v-model="version_id">
                  </el-input>
           </div>
           <br>
          <el-button type="primary" @click="newSubmitForm()" class="yes-btn" icon="importDataBtnIcon">
            {{importDataBtnText}}
          </el-button>
          <!-- <el-button @click="resetForm('newform')">
            重 置
          </el-button> -->
 </div>
</template>

<script>
export default {
  data() {
    return {
       project_id:"",
       version_id:"",
       importDataBtnText:'点击上传',
       importDataBtnIcon:'el-icon-upload2',
       importDataDisabled:'true',
    };
  },
  methods: {
    onSuccess(response, file, fileList){
       this.importDataBtnText='导入成功';
       this.importDataBtnIcon='el-icon-upload2';
       this.importDataDisabled='false';
    },
    onError(err, file, fileList){
       this.importDataBtnText='导入失败';
       this.importDataBtnIcon='el-icon-upload2';
       this.importDataDisabled='false';
    },
    // beforeUpload (file) {
    //   console.log(file)
    //   let fd = new FormData()
    //   fd.append('file', file)
    //   fd.append('groupId', this.groupId)
    //   // console.log(fd)
    //   // this.newVideo(fd).then(res => {
    //   //   console.log(res)
    //   this.newVideo(fd)
    //   //})
    //   return true
    // },
     beforeUpload (file) {
       this.importDataBtnText='正在导入';
       this.importDataBtnIcon='el-icon-loading';
       this.importDataDisabled='false';
        console.log(file)
        let fd = new FormData()
        fd.append('filename', file)
        fd.append('project_id', this.project_id)
        fd.append('version_id', this.version_id)
        this.$http.post('api/upload/', fd).then((res) => {
          this.importDataBtnText='导入成功';
        }, (res) => {
           this.importDataBtnText='导入失败';
        console.log(res)
        })
        return false
     },
      newSubmitForm () {
       this.$refs.newupload.submit()
      },
    
      newVideo (data) {
      console.log("我进这个方法了haha");
      this.$axios({
      method: 'post',
      url: 'http://172.17.187.77:8000/upload/',
      timeout: 20000,
      data: data
                  })
      },
    }
};
</script>

<style >
    .all {
      width: 90%;
      margin: 0 auto;
      padding-top: 100px;
    }
    .demo-input-suffix{
      width:30%;
    }
</style>

说一下路径问题，文件上传的请求地址在 beforeUpload（）方法里面，我这里设置了允许跨域，所以写成了 'api/upload/'，我原本地址为:

url: 'http://172.17.187.77:8000/upload/',
跨域设置方法 进入config文件夹下的index.js

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: ' http://172.17.187.77:8000/',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
  },

target：标签那里写你的请求地址端口以前的，我的是

url: 'http://172.17.187.77:8000/upload/',
所以就写

http://172.17.187.77:8000/
但是你发现后面少了 /upload  所以在

beforeUpload （）方法里面 的请求地址写为 api/upload,如果你不存在跨域问题直接写全请求路径就好了！

原文地址：https://www.cnblogs.com/xqhv587/p/11957723.html