Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit 0b439b72 by YuleiLan
Options

fix: 修复图片上传失败bug。

parent 0a7f1506
Inline Side-by-side
Showing with 239 additions and 223 deletions
src/components/VueFormMaking/components/GenerateFormItem.vue
......@@ -20,7 +20,7 @@
<template v-else-if="widget.type=='imgupload'">
<fm-upload
v-model="dataModel"
:disabled="widget.options.disabled"
:disabled="true"
:style="{'width': widget.options.width}"
:width="widget.options.size.width"
:height="widget.options.size.height"
......@@ -60,7 +60,7 @@
</span>
</el-divider>
</template>
<template v-if="widget.type === 'input' && widget.options.showPassword">
<template v-else-if="widget.type === 'input' && widget.options.showPassword">
<input :value="dataModel" type="password" style="border: none; background-color: #ffffff; color: #303133" disabled="disabled">
</template>
<template v-else>
......
src/components/VueFormMaking/components/Upload/index.vue
......@@ -41,262 +41,278 @@
@click.self="handleAdd"
>
<i class="el-icon-plus" :style="{fontSize:miniWidth/4+'px',marginTop: (-miniWidth/8)+'px', marginLeft: (-miniWidth/8)+'px'}" @click.self="handleAdd" />
<input v-if="multiple" ref="uploadInput" accept="image/*" multiple type="file" :style="{width: 0, height: 0}" name="file" class="el-upload__input upload-input"
@change="handleChange">
<input
v-if="multiple"
ref="uploadInput"
accept="image/*"
multiple
type="file"
:style="{width: 0, height: 0}"
name="file"
class="el-upload__input upload-input"
@change="handleChange"
>
<input v-else ref="uploadInput" accept="image/*" type="file" :style="{width:0, height: 0}" name="file" class="el-upload__input upload-input" @change="handleChange">
</div>
</div>
</template>
<script>
import Viewer from 'viewerjs'
import Draggable from 'vuedraggable'
import * as qiniu from 'qiniu-js'
require('viewerjs/dist/viewer.css')
export default {
components: {
Draggable
import Vue from 'vue'
import Viewer from 'viewerjs'
import Draggable from 'vuedraggable'
import * as qiniu from 'qiniu-js'
require('viewerjs/dist/viewer.css')
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export default {
components: {
Draggable
},
props: {
value: {
type: Array,
default: () => []
},
props: {
value: {
type: Array,
default: () => []
},
width: {
type: Number,
default: 100
},
height: {
type: Number,
default: 100
},
token: {
type: String,
default: ''
},
domain: {
type: String,
default: ''
},
multiple: {
type: Boolean,
default: false
},
length: {
type: Number,
default: 9
},
isQiniu: {
type: Boolean,
default: false
},
isDelete: {
type: Boolean,
default: false
},
min: {
type: Number,
default: 0
},
meitu: {
type: Boolean,
default: false
},
isEdit: {
type: Boolean,
default: false
},
action: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
}
width: {
type: Number,
default: 100
},
data() {
return {
fileList: this.value.map(item => {
return {
key: item.key ? item.key : (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999),
url: item.url,
percent: item.percent ? item.percent : 100,
status: item.status ? item.status : 'success'
}
}),
viewer: null,
uploadId: 'upload_' + new Date().getTime(),
editIndex: -1,
meituIndex: -1
}
height: {
type: Number,
default: 100
},
token: {
type: String,
default: ''
},
domain: {
type: String,
default: ''
},
multiple: {
type: Boolean,
default: false
},
length: {
type: Number,
default: 9
},
computed: {
miniWidth() {
if (this.width > this.height) {
return this.height
} else {
return this.width
isQiniu: {
type: Boolean,
default: false
},
isDelete: {
type: Boolean,
default: false
},
min: {
type: Number,
default: 0
},
meitu: {
type: Boolean,
default: false
},
isEdit: {
type: Boolean,
default: false
},
action: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
fileList: this.value.map(item => {
return {
key: item.key ? item.key : (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999),
url: item.url,
percent: item.percent ? item.percent : 100,
status: item.status ? item.status : 'success'
}
}),
viewer: null,
uploadId: 'upload_' + new Date().getTime(),
editIndex: -1,
meituIndex: -1
}
},
computed: {
miniWidth() {
if (this.width > this.height) {
return this.height
} else {
return this.width
}
},
watch: {
'fileList': {
deep: true,
handler(val) {
}
},
watch: {
'fileList': {
deep: true,
handler(val) {
// this.$emit('input', this.fileList)
}
}
},
mounted() {
this.$emit('input', this.fileList)
},
methods: {
handleChange() {
const files = this.$refs.uploadInput.files
for (let i = 0; i < files.length; i++) {
const file = files[i]
const reader = new FileReader()
const key = (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999)
reader.readAsDataURL(file)
reader.onload = () => {
if (this.editIndex >= 0) {
this.$set(this.fileList, this.editIndex, {
key,
url: reader.result,
percent: 0,
status: 'uploading'
})
}
},
mounted() {
this.$emit('input', this.fileList)
},
methods: {
handleChange() {
const files = this.$refs.uploadInput.files
this.editIndex = -1
} else {
this.fileList.push({
key,
url: reader.result,
percent: 0,
status: 'uploading'
})
}
for (let i = 0; i < files.length; i++) {
const file = files[i]
const reader = new FileReader()
const key = (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999)
reader.readAsDataURL(file)
reader.onload = () => {
if (this.editIndex >= 0) {
this.$set(this.fileList, this.editIndex, {
key,
url: reader.result,
percent: 0,
status: 'uploading'
})
this.$nextTick(() => {
if (this.isQiniu) {
this.uplaodAction2(reader.result, file, key)
} else {
this.uplaodAction(reader.result, file, key)
}
this.editIndex = -1
} else {
this.fileList.push({
key,
url: reader.result,
percent: 0,
status: 'uploading'
})
}
this.$nextTick(() => {
if (this.isQiniu) {
this.uplaodAction2(reader.result, file, key)
} else {
this.uplaodAction(reader.result, file, key)
}
})
}
this.$refs.uploadInput.value = []
},
uplaodAction(res, file, key) {
const changeIndex = this.fileList.findIndex(item => item.key === key)
const xhr = new XMLHttpRequest()
}
this.$refs.uploadInput.value = []
},
uplaodAction(res, file, key) {
// eslint-disable-next-line no-unused-vars
const changeIndex = this.fileList.findIndex(item => item.key === key)
const xhr = new XMLHttpRequest()
const url = this.action
xhr.open('POST', url, true)
// xhr.setRequestHeader('Content-Type', 'multipart/form-data')
const url = this.action
xhr.open('POST', url, true)
// xhr.setRequestHeader('Content-Type', 'multipart/form-data')
const formData = new FormData()
formData.append('file', file)
const formData = new FormData()
formData.append('file', file)
xhr.send(formData)
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
const resData = JSON.parse(xhr.response)
if (resData && resData.url) {
this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
...this.fileList[this.fileList.findIndex(item => item.key === key)],
url: resData.url,
percent: 100
})
setTimeout(() => {
this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
...this.fileList[this.fileList.findIndex(item => item.key === key)],
status: 'success'
})
this.$emit('input', this.fileList)
}, 200)
} else {
xhr.send(formData)
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
const resData = JSON.parse(xhr.response)
resData.url = resData.data
if (resData && resData.url) {
this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
...this.fileList[this.fileList.findIndex(item => item.key === key)],
url: resData.url,
percent: 100
})
setTimeout(() => {
this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
...this.fileList[this.fileList.findIndex(item => item.key === key)],
status: 'error'
status: 'success'
})
this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
}
this.$emit('input', this.fileList)
}, 200)
} else {
this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
...this.fileList[this.fileList.findIndex(item => item.key === key)],
status: 'error'
})
this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
}
}
xhr.onprogress = (res) => {
if (res.total && res.loaded) {
this.$set(this.fileList[this.fileList.findIndex(item => item.key === key)], 'percent', res.loaded / res.total * 100)
}
}
xhr.onprogress = (res) => {
if (res.total && res.loaded) {
this.$set(this.fileList[this.fileList.findIndex(item => item.key === key)], 'percent', res.loaded / res.total * 100)
}
},
uplaodAction2(res, file, key) {
const _this = this
const observable = qiniu.upload(file, key, this.token, {
fname: key,
mimeType: []
}, {
useCdnDomain: true,
region: qiniu.region.z2
})
observable.subscribe({
next(res) {
_this.$set(_this.fileList[_this.fileList.findIndex(item => item.key === key)], 'percent', parseInt(res.total.percent))
},
error(err) {
_this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
status: 'error'
})
_this.fileList.splice(_this.fileList.findIndex(item => item.key === key), 1)
},
complete(res) {
}
},
uplaodAction2(res, file, key) {
const _this = this
const observable = qiniu.upload(file, key, this.token, {
fname: key,
mimeType: []
}, {
useCdnDomain: true,
region: qiniu.region.z2
})
observable.subscribe({
next(res) {
_this.$set(_this.fileList[_this.fileList.findIndex(item => item.key === key)], 'percent', parseInt(res.total.percent))
},
// eslint-disable-next-line handle-callback-err
error(err) {
_this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
status: 'error'
})
_this.fileList.splice(_this.fileList.findIndex(item => item.key === key), 1)
},
complete(res) {
_this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
url: _this.domain + res.key,
percent: 100
})
setTimeout(() => {
_this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
url: _this.domain + res.key,
percent: 100
status: 'success'
})
setTimeout(() => {
_this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
status: 'success'
})
_this.$emit('input', _this.fileList)
}, 200)
}
})
},
handleRemove(key) {
this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
},
handleEdit(key) {
this.editIndex = this.fileList.findIndex(item => item.key === key)
this.$refs.uploadInput.click()
},
handleMeitu(key) {
this.$emit('on-meitu', this.fileList.findIndex(item => item.key === key))
},
handleAdd() {
if (!this.disabled) {
this.editIndex = -1
this.$refs.uploadInput.click()
_this.$emit('input', _this.fileList)
}, 200)
}
},
handlePreviewFile(key) {
this.viewer && this.viewer.destroy()
this.uploadId = 'upload_' + new Date().getTime()
})
},
handleRemove(key) {
this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
},
handleEdit(key) {
this.editIndex = this.fileList.findIndex(item => item.key === key)
this.$nextTick(() => {
this.viewer = new Viewer(document.getElementById(this.uploadId))
this.viewer.view(this.fileList.findIndex(item => item.key === key))
})
this.$refs.uploadInput.click()
},
handleMeitu(key) {
this.$emit('on-meitu', this.fileList.findIndex(item => item.key === key))
},
handleAdd() {
if (!this.disabled) {
this.editIndex = -1
this.$refs.uploadInput.click()
}
},
handlePreviewFile(key) {
this.viewer && this.viewer.destroy()
this.uploadId = 'upload_' + new Date().getTime()
this.$nextTick(() => {
this.viewer = new Viewer(document.getElementById(this.uploadId))
this.viewer.view(this.fileList.findIndex(item => item.key === key))
})
}
}
}
</script>
<style lang="scss">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment