1 <el-upload
show-file-list="false"
list-type="picture"
class="upload-demo"
:action="upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-success="(response, file, fileList) => handleAvatarSuccess('head', response, file, fileList)"
:limit="1">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip"></div>
</el-upload>
on-success 传更多的值， :on-success="(response, file, fileList) => handleAvatarSuccess('head', response, file, fileList)"
response, file, fileList 是原本的参数
handleAvatarSuccess(field, response, file, fileList) {
console.log(response)
console.log('field=' + field)
var url = this.img_url_head + response.v
this.$forceUpdate()
this.$set(this.obj, field, url)
},
2 before-upload中自己上传
<el-upload
class="avatar-uploader"
action="http://localhost:1990/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
beforeAvatarUpload(file) {
let param = new FormData(); //创建form对象
param.append('file', file, file.name); //通过append向form对象添加数据
//param.append('chunk', '0'); //添加form表单中其他数据
let config = {
headers: { 'Content-Type': 'multipart/form-data' }
}; //添加请求头
var that = this
console.log(this.upload)
this.$axios.post(this.upload, param, config)
.then(response => {
console.log(response.data)
// var url = that.img_url_head + response.data.v
// that.imageUrl = url
})
return false
},
------------------------------
美化上传按钮的样式：https://blog.csdn.net/chendeyou5/article/details/80168504
.ui-upload {
height: 30px;
width: 80px;
background-color: #00abff;
font-size: 14px;
line-height: 30px;
cursor: pointer;
display: inline-block;
text-align: center;
color: #fff;
border-radius: 3px;
margin-left: 20px;
}
<label class="ui-upload">upload<input type="file" style="display: none;" /></label>
样式居然会被覆盖，这是为何？？？？？？？
<label style="display: inline-block;height: 30px; width: 80px; background-color: #00abff; font-size: 14px; line-height: 30px; cursor: pointer; text-align: center; color: #fff; border-radius: 3px; margin-left: 20px;">upload<input type="file" style="display: none;" @change="update($event,'head')" /></label>
这样总可以
//-------图片-------
update: function(e, point_name) {
let file = e.target.files[0];
let param = new FormData(); //创建form对象
param.append('file', file, file.name); //通过append向form对象添加数据
//param.append('other', '0'); //添加其他数据
let config = {
headers: { 'Content-Type': 'multipart/form-data' }
}; //添加请求头
var that = this
console.log(this.upload)
this.$axios.post(this.upload, param, config)
.then(response => {
console.log(response.data)
that.upload_success(response.data, point_name)
})
},
// 图片上传成功
upload_success(data, point_name) {
if (data.s == "0") {
var url =this.img_url_head + data.v
//如果该字段，之前的obj中没有，则需要使用 $set 更新，视图才能刷新
this.$set(this.obj, point_name, url)
console.log(this.obj.image)
}
},