element-ui 使用upload上傳文件並解決跨域問題

直接上案列吧！ios

<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/'，我本來地址爲:axios

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：標籤那裏寫你的請求地址端口之前的，個人是api

url: 'http://172.17.187.77:8000/upload/',
因此就寫

http://172.17.187.77:8000/
可是你發現後面少了 /upload 因此在

beforeUpload （）方法裏面 的請求地址寫爲 api/upload,若是你不存在跨域問題直接寫全請求路徑就行了！