|
|
|
|
@ -1,18 +1,20 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-upload
|
|
|
|
|
class="upload-demo"
|
|
|
|
|
:action="requestUrl"
|
|
|
|
|
:on-success="handleSucess"
|
|
|
|
|
:on-remove="handleRemove"
|
|
|
|
|
:file-list="fileList"
|
|
|
|
|
:headers="headers"
|
|
|
|
|
:limit="1"
|
|
|
|
|
list-type="picture"
|
|
|
|
|
<div>
|
|
|
|
|
<el-input
|
|
|
|
|
clearable
|
|
|
|
|
v-model.trim="uploadImgUrl"
|
|
|
|
|
size="mini"
|
|
|
|
|
@change="changeInput"
|
|
|
|
|
>
|
|
|
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
<template slot="append">
|
|
|
|
|
<i class="iconfont iconfolder-o"></i>
|
|
|
|
|
<input type="file" class="file" ref="files" @change="getImages" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
|
|
export default {
|
|
|
|
|
model: {
|
|
|
|
|
@ -21,8 +23,8 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
value: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: []
|
|
|
|
|
type: "",
|
|
|
|
|
default: ""
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
@ -31,25 +33,69 @@ export default {
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: getToken()
|
|
|
|
|
},
|
|
|
|
|
fileList: []
|
|
|
|
|
fileList: [],
|
|
|
|
|
uploadImgUrl: ""
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.fileList = this.value;
|
|
|
|
|
this.uploadImgUrl = this.value;
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleSucess(file) {
|
|
|
|
|
console.log(file);
|
|
|
|
|
this.fileList = [{ name: file.data.fileType, url: file.data.urlPath }];
|
|
|
|
|
this.$emit("input", this.fileList);
|
|
|
|
|
this.$emit("change", this.fileList);
|
|
|
|
|
getImages(el) {
|
|
|
|
|
var file = el.target.files[0];
|
|
|
|
|
var type = file.type.split("/")[0];
|
|
|
|
|
if (type === "image") {
|
|
|
|
|
this.upload(file);
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warn("只能上次图片格式");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
upload(imgUrl) {
|
|
|
|
|
var that = this;
|
|
|
|
|
console.log(that.headers);
|
|
|
|
|
var formdata = new FormData();
|
|
|
|
|
formdata.append("file", imgUrl);
|
|
|
|
|
axios
|
|
|
|
|
.post(this.requestUrl, formdata, {
|
|
|
|
|
headers: that.headers
|
|
|
|
|
})
|
|
|
|
|
.then(response => {
|
|
|
|
|
let res = response.data;
|
|
|
|
|
if (res.code == "200") {
|
|
|
|
|
that.uploadImgUrl = res.data.urlPath;
|
|
|
|
|
that.$emit("input", that.uploadImgUrl);
|
|
|
|
|
that.$emit("change", that.uploadImgUrl);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleRemove(file) {
|
|
|
|
|
this.fileList = [];
|
|
|
|
|
this.$emit("input", []);
|
|
|
|
|
this.$emit("change", []);
|
|
|
|
|
changeInput(e) {
|
|
|
|
|
if (e) {
|
|
|
|
|
this.uploadImgUrl = e;
|
|
|
|
|
} else {
|
|
|
|
|
this.$refs.files.value = "";
|
|
|
|
|
this.uploadImgUrl = "";
|
|
|
|
|
}
|
|
|
|
|
this.$emit("input", this.uploadImgUrl);
|
|
|
|
|
this.$emit("change", this.uploadImgUrl);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped></style>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.file {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 100%;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-input-group__append,
|
|
|
|
|
/deep/.el-input-group__prepend {
|
|
|
|
|
padding: 0 10px !important;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.iconfont {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
qianlishi
3 years ago