|
@@ -182,7 +182,10 @@
|
|
|
<div class="file-dialog">
|
|
|
<el-form ref="form" label-width="80px">
|
|
|
<el-form-item label="图片名称">
|
|
|
- <el-input v-model="imageName" />
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-input v-model="imageName" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">.png</el-col>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<img :src="imageUrl" class="image-url">
|
|
@@ -350,7 +353,9 @@ export default {
|
|
|
},
|
|
|
// 上传成功回调
|
|
|
handleChange(response, file, fileList) {
|
|
|
- this.fileDbList.push({ 'name': file.name, 'url': 'http:' + file.response.url })
|
|
|
+ const item = { 'name': file.name, 'url': 'http:' + file.response.url }
|
|
|
+ this.fileDbList.push(item)
|
|
|
+ this.fileList.push(item)
|
|
|
this.formInline.accessory = JSON.stringify(this.fileDbList)
|
|
|
this.dis = false
|
|
|
this.$message({ showClose: true, message: '文件上传成功', type: 'success' })
|
|
@@ -482,6 +487,15 @@ export default {
|
|
|
return item.name !== file.name
|
|
|
})
|
|
|
},
|
|
|
+ generateMixed(len) {
|
|
|
+ const chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
|
|
|
+ let res = ''
|
|
|
+ for (let i = 0; i < len; i++) {
|
|
|
+ const id = Math.ceil(Math.random() * 35)
|
|
|
+ res += chars[id]
|
|
|
+ }
|
|
|
+ return res
|
|
|
+ },
|
|
|
pasteUpload() {
|
|
|
if (!this.modalShow) {
|
|
|
return false
|
|
@@ -490,17 +504,42 @@ export default {
|
|
|
const reader = new FileReader()
|
|
|
reader.readAsDataURL(window.uploadFiles[0])
|
|
|
reader.onload = () => {
|
|
|
+ const reg = new RegExp(/image\/png/)
|
|
|
this.imageUrl = reader.result
|
|
|
+ if (this.imageUrl.match(reg)) { // 判断是否是图片
|
|
|
+ this.showCopyFile = true
|
|
|
+ this.imageName = this.generateMixed(10)
|
|
|
+ }
|
|
|
}
|
|
|
this.showCopyFile = true
|
|
|
}
|
|
|
},
|
|
|
async confirmUpload() {
|
|
|
+ if (this.imageName === null || this.imageName.replace(/\s+/g, '') === '') {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '请输入图片名称',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ const isExist = this.fileList.some(item => {
|
|
|
+ return this.imageName === item.name
|
|
|
+ })
|
|
|
+ if (isExist) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '图片名称重复',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
this.showCopyFile = false
|
|
|
const res = await this.updateFile(window.uploadFiles[0])
|
|
|
const data = res.data
|
|
|
const item = {
|
|
|
name: this.imageName || '',
|
|
|
+ status: 'success',
|
|
|
url: 'http:' + data.url
|
|
|
}
|
|
|
this.fileList.push(item)
|
|
@@ -541,9 +580,13 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
+ .el-form {
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
}
|
|
|
.image-url {
|
|
|
- width: 80%;
|
|
|
+ width: 90%;
|
|
|
max-height: 60vh;
|
|
|
+ border:1px solid #EBEEF5;
|
|
|
}
|
|
|
</style>
|