Commit af4a520f authored by daywrite's avatar daywrite

ofClient

parent 8a9b3aaa
...@@ -50,5 +50,9 @@ export default { ...@@ -50,5 +50,9 @@ export default {
saveEditDocument: { saveEditDocument: {
url: '/vue/client/save-edit-document' url: '/vue/client/save-edit-document'
},
uploadSingle: {
url: 'http://vue.jinchangxiao.com/vue/upload/single'
} }
} }
<template>
<div class="single-upload">
<el-row :gutter="10">
<el-col :span="4" :class="['client-label', 'text-right', {'required': required}]">
<span>{{label}}</span>
</el-col>
<el-col :span="14">
<el-upload
ref="upload"
:limit="1"
class="upload-single"
:http-request="upload"
:auto-upload="false"
list-type="text"
:multiple="false"
:before-upload="beforeUpload"
:on-remove="handleRemove"
action="/vue/upload/single"
:on-change="handleChange"
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
:file-list="fileList">
<el-button size="small" type="primary" @click="submitUpload" :disabled="fileList.length > 0">上传到服务器
</el-button>
<el-button slot="trigger" size="small" type="primary">选择文件</el-button>
<div class="progress">
<el-progress :percentage="progress" v-if="progress > 0 && progress < 100"></el-progress>
</div>
</el-upload>
<span class="tips">{{tips}}
<span class="text-danger">当有新文件上传时, 之前上传的文件将会被删除</span></span>
</el-col>
<el-col :span="6">
<slot name="formError"></slot>
</el-col>
</el-row>
</div>
</template>
<script>
import $ from 'jquery'
import { request } from '@/lib/request'
import {
api
} from '@/lib/commonMixin'
// import itemMixin from '../../lib/singleItemMixin'
export default {
name: 'single-upload',
// mixins: [itemMixin],
data () {
return {
fileList: [],
progress: 0
}
},
methods: {
beforeUpload (file, upload) {
const isLt50M = file.size / 1024 / 1024 < 50
if (!isLt50M) {
this.$message.error('上传文件大小不能超过50MB!请重新选择文件') // 上传头像图片大小不能超过 2MB
}
return isLt50M
},
handleRemove (file, fileList) {
this.fileList = fileList
this.$refs.upload.abort()
this.$refs.upload.clearFiles()
this.$emit('update:item', '')
},
progressBar (evt) {
var loaded = evt.loaded // 已经上传大小情况
var tot = evt.total // 附件总大小
var per = Math.floor(100 * loaded / tot) // 已经上传的百分比
this.progress = per // 绘制经度条
},
handleChange () {
},
submitUpload () {
this.$refs.upload.submit()
},
upload (item) {
debugger
let formData = new FormData()
formData.append('UploadForm[attachmentFile]', item.file)
let _this = this
request({
url: api.uploadSingle.url,
// url: 'http://localhost:13009/bankimage/uploadImgToBank',
type: 'POST',
cache: false,
data: formData,
contentType: false,
processData: false,
xhr () {
let xhr = $.ajaxSettings.xhr()
if (xhr.upload) {
xhr.upload.addEventListener('progress', _this.progressBar, false)
return xhr
}
}
}).then(res => {
this.progress = 95
this.fileList.push({
name: res.orig_name,
url: res.path
})
this.$emit('update:item', res.key)
}).finally(() => {
this.progress = 100
})
}
},
props: {
tips: {
type: String,
default: ''
},
label: {
type: String,
default: ''
},
required: {
type: Boolean,
default: false
},
fileName: {
type: String,
default: ''
}
},
watch: {
fileName: {
handler (val) {
if (val !== '') {
this.fileList.push({
name: val
})
}
},
immediate: true
}
}
}
</script>
<style scoped>
.tips {
display: block;
line-height: 1.5;
color: #6c757d;
font-size: 12px;
}
</style>
<style>
.single-upload {
width: 100%;
}
.single-upload .tips {
display: block;
margin: 0
}
.single-upload .upload-single {
position: relative;
clear: both;
overflow: hidden;
}
.single-upload .progress {
position: absolute;
width: 100%;
right: 0;
bottom: -17px;
height: 15px;
box-shadow: none;
}
.single-upload .upload-single .el-upload-list--text {
height: 32px;
display: inline-block;
border: 1px solid #ffffff;
width: 100%;
border-radius: 4px;
background: #fff;
vertical-align: middle;
}
.single-upload .upload-single .el-upload {
display: inline-block;
}
.single-upload .upload-single > .el-button {
display: inline-block;
}
.single-upload .upload-single > .el-button {
vertical-align: middle;
}
.single-upload .upload-single .el-upload-list__item:first-child {
margin-top: 3px;
}
</style>
...@@ -16,11 +16,24 @@ ...@@ -16,11 +16,24 @@
v-model.trim="model.description"> v-model.trim="model.description">
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="文件名:" prop="attachment_id" class="ec-clear-left ec-form-item-lg">
<single-upload
label=""
:file-name="getFileName('receiptScan')"
tips="只能上传 jpg,png,pdf 类型文件, 文件不能超过50M"
:form-item="model.attachment_id"
@update:item="val => {model.attachment_id = val}">
<!-- <span slot="formError" class="el-form-item__error">
{{errorData['receipt_scan']}}
</span> -->
</single-upload>
</el-form-item>
</el-form> </el-form>
</section> </section>
</template> </template>
<script> <script>
import settingMixin from '../common/settingMixin' import settingMixin from '../common/settingMixin'
import singleUpload from '../common/singleUpload'
import { import {
requestAPI, requestAPI,
api api
...@@ -35,10 +48,12 @@ export default { ...@@ -35,10 +48,12 @@ export default {
}, },
components: { components: {
singleUpload
}, },
data () { data () {
return { return {
i: '',
rules: { rules: {
'title': [ 'title': [
{required: true, message: '标题不能为空', trigger: 'blur'} {required: true, message: '标题不能为空', trigger: 'blur'}
...@@ -80,6 +95,10 @@ export default { ...@@ -80,6 +95,10 @@ export default {
}).then(res => { }).then(res => {
return res return res
}) })
},
getFileName (key) {
return ''
} }
} }
} }
......
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