Skip to content

F
ferry_web
Commit 0b439b72 by YuleiLan
Options

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

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