自己写的一个小demo,拷贝到html直接打开即可测试运行。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入最新版本样式 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Document</title>
<style>
.content {
width: 300px;
height: 50px;
font-size: 20px;
display: flex;
line-height: 50px;
}
.contentName {
width: 50px;
}
</style>
</head>
<body>
<div id="app">
<el-col :span="4" :xs="24">
<el-input v-model="uploadData.msg" type="text" placeholder="所传信息" />
</el-col>
<el-upload class="upload-demo" ref="upload" action="URL" :on-preview="handlePreview" :on-remove="handleRemove"
:on-change="handleChange" :file-list="fileList" :data="uploadData" :auto-upload="false"
:on-success="success" :multiple="false" :on-error="error">
<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>
</div>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入最新版本组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 固定版本样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
<!-- 固定版本组件库 -->
<script src="https://unpkg.com/element-ui@2.12.0//lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
fileList: [],
// 上传时附带的额外参数
uploadData: {
type: 1,
msg: "",
}
},
methods: {
submitUpload() {
// 请求加的参数this.uploadData
console.log(this.uploadData)
// 看看这个时候的请求地址是否正确上面的action
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
//上传成功时弹框
success(res, file, fileList) {
// 在文件上传成功后,可以从response的data属性获取图片在服务器上的路径,文件的具体信息在file.raw中
console.log(res, file, fileList)
},
error(err, file, fileList) {
console.log(file, "失败信息")
},
//上传文件让第二次覆盖第一的文件
handleChange(file, fileList) {
if (fileList.length > 0) {
this.fileList = [fileList[fileList.length - 1]]
}
}
},
})
</script>
</body>
</html>
