vue+element ui 图片上传

element ui 文档里已经有封装好的图片上传，刚开始不会用，经高人点拨终于写出来了，虽然样式还不会改，记录一下吧。

可以去官网上看文档https://element.eleme.cn/#/zh-CN/component/installation，上面有element ui 组件

1.首先将upload组件复制到自己的项目里

复制这个到自己的项目里

<el-form-item label="文章图片" prop="img_url">
			<img width="100%" v-model="ruleForm.img_url" :src="ruleForm.img_url" alt="" style="width:148px;height:145px;float:left;margin-left: 20px;">
			<el-upload class="upload-demo" ref="upload" action="/api/uploadimg" :data="uploadData" :on-success="fileSuccess" 
			 :on-preview="handlePreview" :on-remove="handleRemove" :auto-upload="false">
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
			</el-upload>
</el-form-item>

<script>
	export default {
		data() {
			return {
			uploadData: {     //图片上传的参数
					path: 'news',
					prefix_name: 'news',
				},
				ruleForm: {
					img_url: '',
				},
			}
		},
		methods: {
		submitUpload() {
		//提交上传
				this.$refs.upload.submit();
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			}
			//上传成功之后的操作
			fileSuccess(response, file, fileList) {
				if(response.err_code == 0){
				//赋值
					this.ruleForm.img_url = response.data;
				}	
			},
		}
	}
</script>

到这里，基本上就可以了，但是你要请求接口还需要以下操作
首先你要在项目里下载axios

接下来在src下创建目录api/index.vue

//输出通用axios实例
import axios from 'axios';

const instance = axios.create({
	timeout: 10000,
	headers: {
		'Content-Type': "application/json;charset=utf-8"
	}
});

export default {
	userLogin(data) {
		return instance.post('/api/login/loginPassWord', data);//用户登陆
	},
	getUserInfo() {
		return instance.post('/api/permission/getUserInfo');//获取用户信息批量
	},
	delUserInfo(data) {
		return instance.post('/api/permission/delUserInfo',data)//删除用户信息
	},

}

然后在config/index.js中添加以下代码：

proxyTable: {
		'/api': {
						target: 'http://vue.com',   //这个是你接口的域名
		              changeOrigin: true,
		              pathRewrite: {
		                '^/api': '/' 
		              }
		            }
	},

接下来就可以在项目里调用了：

this.instance.userLogin({
			phone: that.ruleForm.phone,
			password: that.ruleForm.password
		}).then(res => {
			//请求成功
		}).catch(function(error) {
			//失败
			console.log(error);
		});