1.页面中引入相应的css、js链接 顺序不能乱 先引入vue 在引入elementui
<link rel="stylesheet" type="text/css" href="/qrcode/css/elementUI.css"/>
<script src="/qrcode/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="/qrcode/js/axios.min.js" type="text/javascript"></script>
<script src="/qrcode/js/elementUI.js" type="text/javascript"></script>
- 引入相关代码
<div id="app">
<el-upload class="upload-demo" action="" ref="upload" :auto-upload="false" :http-request="uploadFile"
list-type="picture">
<el-button size="small" type="primary">替换默认logo</el-button>
</el-upload>
<el-button size="big" type="success" @click="submitUpload">
上传
</el-button>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
fileData: new FormData(),
};
},
methods: {
//覆盖默认的上传行为,可以自定义上传的实现
uploadFile(file) {
this.fileData.append('file', file.file); //服务器最终接收到的是file数组
},
submitUpload() {
this.$refs.upload.submit(); //手动上传文件,此处表单提交后会自动调用uploadFile()方法,如果是多个文件就调用多次
//自定义内容
this.fileData.append('text', "自定义内容");
axios.post('xxxx', fileData).then(response => {
let resp = response.data;
if (resp.code == 200) {
this.$message({
message: '上传成功',
type: 'success'
})
} else {
this.$message({
message: '上传失败,请重试',
type: 'error'
})
}
})
},
},
})
</script>
版权声明:本文为weixin_46474903原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。