172 lines
3.3 KiB
Vue
172 lines
3.3 KiB
Vue
<script>
|
||
import ajax from "./ajax";
|
||
export default {
|
||
props: {
|
||
headers: {
|
||
type: Object,
|
||
default: {},
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
disablePreview: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
delIcon: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
// 自动上传
|
||
autoUpload: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
// 最大选择个数 ，h5只能限制单选或是多选
|
||
limit: {
|
||
type: [Number, String],
|
||
default: 9,
|
||
},
|
||
// 列表样式 grid | list | list-card
|
||
mode: {
|
||
type: String,
|
||
default: "grid",
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
listStyles: {
|
||
type: Object,
|
||
default() {
|
||
return {
|
||
// 是否显示边框
|
||
border: true,
|
||
// 是否显示分隔线
|
||
dividline: true,
|
||
// 线条样式
|
||
borderStyle: {},
|
||
};
|
||
},
|
||
},
|
||
imageStyles: {
|
||
type: Object,
|
||
default() {
|
||
return {
|
||
width: "auto",
|
||
height: "auto",
|
||
};
|
||
},
|
||
},
|
||
readonly: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
returnType: {
|
||
type: String,
|
||
default: "array",
|
||
},
|
||
sizeType: {
|
||
type: Array,
|
||
default() {
|
||
return ["original", "compressed"];
|
||
},
|
||
},
|
||
onStart: Function,
|
||
onSelfProgress: Function,
|
||
onSelfSuccess: Function,
|
||
onSelfError: Function,
|
||
httpRequest: {
|
||
type: Function,
|
||
default: ajax,
|
||
},
|
||
withCredentials: Boolean,
|
||
data: Object,
|
||
action: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
baseUrl: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
name: {
|
||
type: String,
|
||
default: "file",
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
form: {},
|
||
mouseover: false,
|
||
reqs: {},
|
||
};
|
||
},
|
||
mounted() {
|
||
const that = this;
|
||
that.$on("selfUploadFiles", (val) => {
|
||
that.uploadFiles(val);
|
||
});
|
||
},
|
||
methods: {
|
||
uploadFiles(rawFile) {
|
||
const that = this;
|
||
const { uuid } = rawFile;
|
||
let file = rawFile.file;
|
||
file.uid = file.uuid;
|
||
file.status = "ready";
|
||
file.percentage = 0;
|
||
const options = {
|
||
headers: this.headers,
|
||
withCredentials: this.withCredentials,
|
||
file: file,
|
||
data: this.data,
|
||
filename: this.name,
|
||
action: this.action,
|
||
onProgress: (e) => {
|
||
that.onSelfProgress(e, rawFile);
|
||
},
|
||
onSuccess: (res) => {
|
||
that.onSelfSuccess(res, rawFile);
|
||
delete that.reqs[uuid];
|
||
},
|
||
onError: (err) => {
|
||
that.onSelfError(err, rawFile);
|
||
delete that.reqs[uuid];
|
||
},
|
||
};
|
||
const req = this.httpRequest(options);
|
||
this.reqs[uuid] = req;
|
||
if (req && req.then) {
|
||
req.then(options.onSuccess, options.onError);
|
||
}
|
||
},
|
||
},
|
||
render(h) {
|
||
let {
|
||
handleClick,
|
||
drag,
|
||
name,
|
||
handleChange,
|
||
multiple,
|
||
accept,
|
||
listType,
|
||
uploadFiles,
|
||
disabled,
|
||
handleKeydown,
|
||
} = this;
|
||
const data = {
|
||
class: {
|
||
"self-upload": true,
|
||
},
|
||
on: {
|
||
click: handleClick,
|
||
keydown: handleKeydown,
|
||
},
|
||
};
|
||
data.class[`self-upload--${listType}`] = true;
|
||
return <div style="display:none"></div>;
|
||
},
|
||
};
|
||
</script> |