vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
devServer: {
proxy:{
"/api":{
target: "http://xx.xx.xx.xx:9001/",
changeOrigin: true,
pathRewrite:{
"^/api": ''
}
}
}
},
productionSourceMap: false,
lintOnSave: false,
configureWebpack: {
resolve: {
alias:{
// 起别名
}
}
},
}
/api 会代替http://xx.xx.xx.xx:9001/去请求真实的服务器地址
页面中写:
<el-upload
class="upload-demo"
action="#"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
:http-request="httpRequest"
:on-progress="handleProgress"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
VUE methods 里面写:
methods:{
beforeUpload(file) {
let fd = new FormData()
fd.append('fileName',file) // 传参
axios.post('/api/minio/uploads',fd,{
headers:{
// 请求头
'Content-Type': 'multipart/form-data; boundary=--------------------------908415175326278934569157'
}
}).then(() => {
this.$message.success("文件上传成功")
}).catch(() => {
this.$message.error("文件上传失败")
})
},
script 里面引入:
<script>
import axios from "axios";
。。。。。。。。。