Skip to content

Commit

Permalink
feat: 支持本地服务器上传文件
Browse files Browse the repository at this point in the history
  • Loading branch information
greper committed May 14, 2020
1 parent 0a2b60a commit 1f319f2
Show file tree
Hide file tree
Showing 11 changed files with 173 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,23 @@ export const crudOptions = {
},
helper: '上传到七牛'
}
},
{
title: '本地服务器',
key: 'local',
type: 'avatar-cropper',
form: {
component: {
props: {
type: 'form',
elProps: {
action: '/api/upload/form/upload',
name: 'file'
}
}
},
helper: '上传到本地服务器'
}
}
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ export const crudOptions = {
form: { disabled: true }
},
{
title: '日期',
title: '日期2',
key: 'date2',
sortable: true,
type: 'date',
search: { disabled: true },
form: { disabled: true }
form: { disabled: false }
}
]
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const crudOptions = {
title: 'radio',
key: 'status2',
sortable: true,
search: {},
search: { disabled: false },
type: 'radio',
dict: {
url: '/api/dicts/OpenStatusEnum'
Expand All @@ -69,7 +69,7 @@ export const crudOptions = {
title: 'checkbox',
key: 'status3',
sortable: true,
search: {},
search: { disabled: false },
type: 'checkbox',
dict: {
url: '/api/dicts/OpenStatusEnum'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,25 @@ export const crudOptions = {
},
helper: '这里演示的是阿里云文件上传,配置样式,居中裁剪成200x200方形图片'
}
},
{
title: '普通表单上传',
key: 'formAvatar',
sortable: true,
type: 'avatar-uploader',
form: {
component: {
props: {
type: 'form',
elProps: {
action: '/api/upload/form/upload',
name: 'file'
}
},
span: 24
},
helper: 'form表单上传'
}
}
]
}
8 changes: 0 additions & 8 deletions packages/d2-crud-plus-extends/src/file-uploder/lib/choose.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
// import cos from './uploader/cos'
// import alioss from './uploader/alioss/alioss'
// import qiniu from './uploader/qiniu'
// let map = {
// cos: cos,
// alioss: alioss,
// qiniu: qiniu
// }
export default {
get (type) {
return require('./uploader/' + type).default
Expand Down
5 changes: 5 additions & 0 deletions packages/d2-crud-plus-extends/src/file-uploder/lib/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ export default {
},
domain: 'http://pzrsldiu3.bkt.clouddn.com'
},
form: {
successHandle (res) { // 需要将res.url 设置为url
return { url: res.data }
}
},
buildKey (fileName, custom, context) { // 文件key的构建规则
const date = new Date()
let fileType = 'file'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,9 @@ export default {
// cropperjs的参数,详见:https://github.com/fengyuanchen/cropperjs
cropper: {
type: Object
},
elProps: {
type: Object
}
},
Expand Down Expand Up @@ -150,7 +153,16 @@ export default {
item.message = '文件上传出错:' + e.message
console.log(e)
}
let option = { file: blob, onProgress, onError }
let option = {
file: blob,
onProgress,
onError
}
if (this.elProps != null) {
option.action = this.elProps.action
option.filename = this.elProps.name
}
this.list.push(item)
let upload = await this.doUpload(option, context)
item.url = upload.url
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default {
btnName: { default: '选择文件' },
// 可选哪些类型的文件
accept: {},
// 上传后端类型,[cos,qiniu,alioss]
// 上传后端类型,[cos,qiniu,alioss,form]
type: {
type: String,
default: 'cos' // 上传类型:form cos qiniu alioss
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
function getError (action, option, xhr) {
let msg
if (xhr.response) {
msg = `${xhr.response.error || xhr.response}`
} else if (xhr.responseText) {
msg = `${xhr.responseText}`
} else {
msg = `fail to post ${action} ${xhr.status}`
}

const err = new Error(msg)
err.status = xhr.status
err.method = 'post'
err.url = action
return err
}

function getBody (xhr) {
const text = xhr.responseText || xhr.response
if (!text) {
return text
}

try {
return JSON.parse(text)
} catch (e) {
return text
}
}

export default function upload (option, onSuccess, onError) {
if (typeof XMLHttpRequest === 'undefined') {
return
}

const xhr = new XMLHttpRequest()
const action = option.action

if (xhr.upload) {
xhr.upload.onprogress = function progress (e) {
if (e.total > 0) {
e.percent = e.loaded / e.total * 100
}
option.onProgress(e)
}
}

const formData = new FormData()

if (option.data) {
Object.keys(option.data).forEach(key => {
formData.append(key, option.data[key])
})
}

formData.append(option.filename, option.file, option.file.name)

xhr.onerror = function error (e) {
// option.onError(e)
onError(e)
}

xhr.onload = function onload () {
if (xhr.status < 200 || xhr.status >= 300) {
return option.onError(getError(action, option, xhr))
}

// option.onSuccess(getBody(xhr))
onSuccess(getBody(xhr))
}

xhr.open('post', action, true)

if (option.withCredentials && 'withCredentials' in xhr) {
xhr.withCredentials = true
}

const headers = option.headers || {}

for (let item in headers) {
if (headers.hasOwnProperty(item) && headers[item] !== null) {
xhr.setRequestHeader(item, headers[item])
}
}
xhr.send(formData)
return xhr
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import config from '../../config'
import ajax from './ajax'
export default {
beforeUpload (file, custom) {
let fileName = file.name
console.log('-----------开始上传----------', fileName)
return new Promise(resolve => {
resolve({})
})
},
doUpload (option, custom, context) {
return new Promise((resolve, reject) => {
console.log('-----', option)
ajax(option,
(res) => {
resolve(config.form.successHandle(res))
},
(e) => {
option.onError(e)
reject(e)
})
})
}
}
6 changes: 3 additions & 3 deletions packages/d2-crud-plus/src/lib/types/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,17 +59,17 @@ export default {
component: { name: 'date-format', props: { format: 'HH:mm:ss' } }
},
select: {
search: { component: { props: { clearable: true } } },
search: { disabled: true, component: { props: { clearable: true } } },
form: { component: { name: 'dict-select', props: {} } },
component: { name: 'values-format', props: {} }
},
radio: {
search: { component: { name: 'dict-select', props: { clearable: true } } },
search: { disabled: true, component: { name: 'dict-select', props: { clearable: true } } },
form: { component: { name: 'dict-radio', props: {} } },
component: { name: 'values-format', props: {} }
},
checkbox: {
search: { component: { name: 'dict-select', props: { clearable: true, multiple: true } } },
search: { disabled: true, component: { name: 'dict-select', props: { clearable: true, multiple: true } } },
form: { component: { name: 'dict-checkbox', props: {} } },
component: { name: 'values-format', props: {} }
},
Expand Down

0 comments on commit 1f319f2

Please sign in to comment.