|
@@ -0,0 +1,97 @@
|
|
|
+<template>
|
|
|
+ <a-modal :visible="visible" title="上传图片" :footer="null" @cancel="handleCancel">
|
|
|
+ <a-upload
|
|
|
+ :action="uploadUrl"
|
|
|
+ list-type="picture-card"
|
|
|
+ :file-list="defaultApplicationFileList"
|
|
|
+ @change="handleApplicationFileChange"
|
|
|
+ @preview="handlePreview"
|
|
|
+ accept="image/*"
|
|
|
+ :headers="headers"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <a-icon type="plus" />
|
|
|
+ <div class="ant-upload-text">
|
|
|
+ Upload
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-upload>
|
|
|
+ <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false" @ok="previewVisible = false">
|
|
|
+ <img alt="example" style="width: 100%" :src="previewImage" />
|
|
|
+ </a-modal>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { uploadUrl } from '@/api/upms/file'
|
|
|
+import Vue from 'vue'
|
|
|
+import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ uploadUrl: uploadUrl,
|
|
|
+ previewVisible: false,
|
|
|
+ previewImage: '',
|
|
|
+ defaultApplicationFileList: [],
|
|
|
+ modal: {},
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer ' + Vue.ls.get(ACCESS_TOKEN)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ base (record) {
|
|
|
+ this.visible = true
|
|
|
+ this.modal = record
|
|
|
+ if (!record.sbFileList) {
|
|
|
+ record.sbFileList = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.defaultApplicationFileList = this.BaseTool.UPLOAD.transImg(record.sbFileList.map((item, i) => {
|
|
|
+ item.id = i
|
|
|
+ return item
|
|
|
+ }))
|
|
|
+ },
|
|
|
+ getBase64 (file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.readAsDataURL(file)
|
|
|
+ reader.onload = () => resolve(reader.result)
|
|
|
+ reader.onerror = error => reject(error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleApplicationFileChange (info) {
|
|
|
+ this.defaultApplicationFileList = info.fileList
|
|
|
+ this.modal.sbFileList = this.setFileList(info, 11)
|
|
|
+ },
|
|
|
+ setFileList (info, type) {
|
|
|
+ const file = info.file
|
|
|
+ const fileList = info.fileList
|
|
|
+ if (file.status === 'done') {
|
|
|
+ return this.BaseTool.UPLOAD.getUploadFileDTO(fileList, type)
|
|
|
+ } else if (file.status === 'removed') {
|
|
|
+ return this.BaseTool.UPLOAD.getUploadFileDTO(fileList, type)
|
|
|
+ } else if (file.status === 'error') {
|
|
|
+ this.$message.error('上传失败')
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async handlePreview (file) {
|
|
|
+ if (!file.url && !file.preview) {
|
|
|
+ file.preview = await this.getBase64(file.originFileObj)
|
|
|
+ }
|
|
|
+ this.previewImage = file.url || file.preview
|
|
|
+ this.previewVisible = true
|
|
|
+ },
|
|
|
+ handleCancel () {
|
|
|
+ this.modal = {}
|
|
|
+ this.visible = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+
|
|
|
+</style>
|