123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- <template>
- <div
- :style="{ width: record.options.width }"
- class="upload-img-box-9136076486841527"
- >
- <a-upload
- :name="config.uploadImageName || record.options.fileName"
- :headers="config.uploadImageHeaders || record.options.headers"
- :data="config.uploadImageData || optionsData"
- :action="config.uploadImage || record.options.action"
- :multiple="record.options.multiple"
- :listType="record.options.listType"
- :disabled="record.options.disabled || parentDisabled"
- :fileList="fileList"
- accept="image/gif, image/jpeg, image/png"
- @change="handleChange"
- @preview="handlePreview"
- :remove="remove"
- :beforeUpload="beforeUpload"
- >
- <a-button
- v-if="
- record.options.listType !== 'picture-card' &&
- fileList.length < record.options.limit
- "
- :disabled="record.options.disabled || parentDisabled"
- >
- <a-icon type="upload" /> {{ record.options.placeholder }}
- </a-button>
- <div
- v-if="
- record.options.listType === 'picture-card' &&
- fileList.length < record.options.limit
- "
- :disabled="record.options.disabled || parentDisabled"
- >
- <a-icon type="plus" />
- <div class="ant-upload-text">{{ record.options.placeholder }}</div>
- </div>
- </a-upload>
- <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
- <img alt="example" style="width: 100%" :src="previewImageUrl" />
- </a-modal>
- </div>
- </template>
- <script>
- export default {
- name: "KUploadImg",
-
- props: ["record", "value", "config", "parentDisabled"],
- data() {
- return {
- fileList: [],
- previewVisible: false,
- previewImageUrl: ""
- };
- },
- watch: {
- value: {
-
- handler(val) {
- if (val) {
- this.setFileList();
- }
- },
- immediate: true,
- deep: true
- }
- },
- computed: {
- optionsData() {
- try {
- return JSON.parse(this.record.options.data);
- } catch (err) {
- console.error(err);
- return {};
- }
- }
- },
- methods: {
- setFileList() {
-
-
- if (typeof this.value === "string") {
- this.fileList = JSON.parse(this.value);
-
- this.handleSelectChange();
- } else {
- this.fileList = this.value;
- }
- },
- handleSelectChange() {
- setTimeout(() => {
- const arr = this.fileList.map(item => {
- if (typeof item.response !== "undefined") {
- const res = item.response;
- return {
- type: "img",
- name: item.name,
- status: item.status,
- uid: item.uid,
- url: res.data.url || ""
- };
- } else {
- return {
- type: "img",
- name: item.name,
- status: item.status,
- uid: item.uid,
- url: item.url || ""
- };
- }
- });
- this.$emit("change", arr);
- this.$emit("input", arr);
- }, 10);
- },
- handlePreview(file) {
-
- this.previewImageUrl = file.url || file.thumbUrl;
- this.previewVisible = true;
- },
- handleCancel() {
-
- this.previewVisible = false;
- },
- remove() {
- this.handleSelectChange();
- },
- beforeUpload(e, files) {
- if (files.length + this.fileList.length > this.record.options.limit) {
- this.$message.warning(`最大上传数量为${this.record.options.limit}`);
- files.splice(this.record.options.limit - this.fileList.length);
- }
- },
- handleChange(info) {
-
- this.fileList = info.fileList;
- if (info.file.status === "done") {
- const res = info.file.response;
- if (res.code === 0) {
- this.handleSelectChange();
- } else {
- this.fileList.pop();
- this.$message.error(`图片上传失败`);
- }
- } else if (info.file.status === "error") {
- this.$message.error(`图片上传失败`);
- }
- }
- }
- };
- </script>
- <style lang="less">
- .upload-img-box-9136076486841527 {
- /* you can make up upload button and sample style by using stylesheets */
- .ant-upload-select-picture-card i {
- font-size: 32px;
- color: #999;
- }
- .ant-upload-select-picture-card .ant-upload-text {
- margin-top: 8px;
- color: #666;
- }
- }
- </style>
|