直接上案列吧!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,若是你不存在跨域問題直接寫全請求路徑就行了!