vue+axios+element 图片上传
- 默认使用element的el-upload
action
传入上传图片的的后台路径,data
传入所需的额外参数
<template>
<el-upload
class="upload-demo"
drag
:action="uploadUrl"
:data="data"
:on-change="onChange"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
export default {
name: 'upload',
computed: {
uploadUrl: function() {
// 上传地址
let uploadImage = '/index.php/uploadImage';
return uploadImage;
},
// 额外参数
data() {
return {
'atustr': 'atustr',
'token': 'token',
'sign':'sign'
};
}
},
};
-
不使用
action
上传- 在接口中不需要单独设置
headers
头
<el-upload :class="{ hideUpload: hideUpload }" :auto-upload='false' action="#" :on-change="handleChange"> <i class="el-icon-plus"></i> </el-upload> export default { name: 'upload', methods: { handleChange(file, fileList) { let atustr = 'atustr'; let token = 'token'; let sign = 'sign'; // 使用 FormData let fd = new FormData(); fd.append('image', file.raw); fd.append('atustr', 'atustr'); fd.append('token', 'token'); fd.append('sign', 'sign'); // 二次封装的 axios uploadImage(fd).then(res => { console.log(res); }); }, } }
-
request.js
// 使用axios import axios from 'axios'; const service = axios.create({ timeout: 5000 }); service.interceptors.request.use( config => { return config; }, error => { console.log(error); return Promise.reject(); } ); service.interceptors.response.use( response => { if (response.status === 200) { return response.data; } else { Promise.reject(); } }, error => { console.log(error); return Promise.reject(); } ); export default service;
-
上传接口
import request from '@/utils/request'; export function uploadImage(data) { return request({ url: '/index.php/uploadImage', method: 'post', data: data }); }
- 在接口中不需要单独设置
跨域问题
proxyTable: {
'/api': {
target: 'http://127.0.0.1:3002',//要访问的后端接口
ws: true, //如果要代理 websockets,配置这个参数
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{
'^/api':'/api'
}
}
},