一. 使用组件
1. 安装element
npm i element-ui -S
2. main.js全局引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
3.页面组件
<el-upload
class="upload-demo"
action="/api/upload"
:http-request-"handleRequest"
:on-success="handleSuccess'
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture"
<e1-button size="sma11” type="primary">点击上传</e1-button>
<div slot="tip”class="el-upload tip">只能上传jpg/png文件，且不超过500kb</div>
</e1-upload>
二. 使用方法
methods: {
//覆盖默认的上传行为
async handleRequest(e) {
//1.放到FormData里面
let formData = new FormData()
formData.append("file"，e.file）
//2.发送post请求
let { data } = await upload(formData).catch(err => console.error(err))
return data;
},
//图片上传成功
handlesuccess({data}) {
//添加至要提交的表单中
this.ruleForm.pics.push ({pic:data.tmp_path})
},
}
