yxt_product
/
oms-ui-admin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

公共上传组件

master
yunuo970428 11 months ago
parent
d54784d901
commit
4bc116bbcb
2 changed files with 449 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 218
      src/components/uploadFile/upload.vue
  2. 231
      src/components/uploadFile/uploadImg.vue

218
src/components/uploadFile/upload.vue
View File

@ -0,0 +1,218 @@
<template>
<div>
<el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData"
:on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian"
:on-preview="handlePictureCardPreview" :show-file-list="false" :multiple="true">
<el-button size="mini" type="primary">上传</el-button>
</el-upload>
</div>
</template>
<script>
import { uploadFile } from '@/api/Common/Upload'
import { getStorage } from '@/utils/auth.js'
export default {
model: {
prop: 'name',
event: 'change'
},
props: {
placeholder: {
type: String,
default: ''
},
bucket: {
type: String,
default: 'abc'
},
// 长度
width: {
type: String,
default: '270px'
},
limit: {
type: Number,
default: 1
},
accept: {
type: String,
default:
'.jpg,.jpeg,.png,.JPG,.JPEG'
},
// 文件名称
name: {
type: Array,
required: true
},
uploadData: {
type: Object,
default: {}
}
},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
accessToken: null,
uploadFile: uploadFile,
fileList_FuJian: [],
enclosure: '',
file_add: '',
file_catch: '',
files: [],
files_list: [],
filedUrl: '',
// fileUrl: fileUrl,
// showpicture:false,
isview: false,
nameArr: '',
loadding: false,
stateName: '',
/* uploadData: { modelSid: '' },*/
sid: ''
}
},
watch: {
name: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
console.log('aaaa1', newVal)
this.files = newVal
console.log('aaaa2', this.files)
}
}
},
mounted() {
this.$nextTick(() => {
this.Init()
})
},
created() {
this.uploadFile = uploadFile // 接口
this.accessToken = {
token: getStorage()
}
},
methods: {
// 页面第一次加载
Init() {
if (this.name !== undefined) {
this.files = []
for (var i = 0; i < this.name.length; i++) {
this.files.push({
name: this.name[i],
url: this.name[i]
})
}
}
},
// 上传方案--成功后执行
uploadImgSuccess_FuJian(response, file, fileList) {
let _this = this
console.log('您选择的file:', file)
// console.log('您传递的data:', _this.uploadData)
if (file.response.code === '200') {
this.loadding = false
// 返显图片
this.filedUrl = this.fileUrl + file.response.data
// var uid = file.response.data
const files = []
files.push({
name: file.response.data.sourceFileName,
url: file.response.data.fullUrl,
size: file.response.data.size
})
this.$emit('change', files)
this.$emit('eett', files)
}
},
removeImage(file, ImageFileList) {
this.files.splice(this.files.indexOf(file), 1)
const imgFiles = []
this.files.forEach((o) => {
imgFiles.push(o.url)
})
this.$emit('fileChange', this.files)
},
handleRemove(file, fileList) {
console.log('file:' + JSON.stringify(file))
console.log('fileList:' + JSON.stringify(fileList))
this.enclosure = ''
// 1. 保存新增文件id(this.file_add)
this.getNewFileId(fileList)
// 2. 保存数据库读取的已有文件id(this.file_catch)
this.getCatchFileId(file)
// 3. 保存并拼接id
this.getFileId()
// 4. 返回拼接id
this.$emit('change', this.enclosure)
},
// 返回this.file_add(新上传文件的id拼接集合)
getNewFileId(fileList) {
// debugger
this.file_add = ''
for (var i = 0; i < fileList.length; i++) {
if (fileList[i].response && fileList[i].response.code === '200') {
this.file_add = this.file_add + fileList[i].response.data + ','
}
}
if (this.file_add !== '') {
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
}
// console.log('1. this.file_add: ' + this.file_add)
},
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
getCatchFileId(file) {
for (var i = 0; i < this.files_list.length; i++) {
if (this.file_catch !== '') {
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
if (this.files_list[i].name === file.name) {
// 2. 拆开file_catch到fils_arry
var fils_arry = this.file_catch.split(',')
// 3. 从fils_arry去除 this.files_list[i].id
var arry = []
fils_arry.forEach((element) => {
// 不加载文件里面的
if (element !== this.files_list[i].id) {
arry.push(element)
}
})
// 4. 重新拼接成file_catch
this.file_catch = arry.join(',')
}
}
}
// console.log('2. this.file_catch:' + this.file_catch)
},
// 保存并拼接id
getFileId() {
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
if (this.file_catch !== '') {
if (this.file_add !== '') {
this.enclosure = this.file_catch + ',' + this.file_add
} else {
this.enclosure = this.file_catch
}
} else {
this.enclosure = this.file_add
}
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
},
// 上传失败
uploadError() {
this.loadding = false
},
uploadProgrees(event, file, fileList) {
if (Number(event.percent) > 0) {
this.loadding = true
}
}
}
}
</script>
<style scoped></style>

231
src/components/uploadFile/uploadImg.vue
View File

@ -0,0 +1,231 @@
<template>
<div>
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken"
:action="uploadFile" :accept="accept" list-type="picture-card"
:file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview"
:on-progress="uploadProgrees"
:on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
<i class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import { uploadFile } from '@/api/Common/Upload'
import { getStorage } from '@/utils/auth.js'
export default {
model: {
prop: 'name',
event: 'change'
},
props: {
placeholder: {
type: String,
default: ''
},
bucket: {
type: String,
default: 'abc'
},
// 长度
width: {
type: String,
default: '270px'
},
limit: {
type: Number,
default: 1
},
accept: {
type: String,
default:
'.jpg,.jpeg,.png,'
},
// 文件名称
name: {
type: Array,
required: true
},
uploadData: {
type: Object,
default: {}
}
},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
accessToken: null,
uploadFile: uploadFile,
fileList_FuJian: [],
enclosure: '',
file_add: '',
file_catch: '',
files: [],
files_list: [],
filedUrl: '',
// fileUrl: fileUrl,
// showpicture:false,
isview: false,
nameArr: '',
loadding: false,
stateName: ''
}
},
watch: {
name: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
console.log('aaaa1', newVal)
console.log('aaaa2', oldVal)
this.files = newVal
console.log('aaaa2this.files', this.files)
}
}
},
mounted() {
this.$nextTick(() => {
this.Init()
})
},
created() {
this.uploadFile = uploadFile // 接口
this.accessToken = {
token: getStorage()
}
},
methods: {
// 页面第一次加载
Init() {
if (this.name !== undefined) {
this.files = []
for (var i = 0; i < this.name.length; i++) {
if (this.name[i].url !== null && this.name[i].url !== undefined) {
this.files.push({
name: this.name[i].name,
url: this.name[i].url
})
} else {
this.files.push({
name: this.name[i],
url: this.name[i]
})
}
}
}
},
// 上传方案--成功后执行
uploadImgSuccess_FuJian(response, file, fileList) {
console.log('您选择的file:', file)
if (file.response.code === '200') {
this.loadding = false
// 返显图片
this.filedUrl = this.fileUrl + file.response.data
// var uid = file.response.data
this.files.push({
name: file.response.data.sourceFileName,
url: file.response.data.fullUrl,
filePath: file.response.data.filePath,
size: file.response.data.size
})
this.$emit('change', this.files)
this.$emit('eett', this.files)
}
},
removeImage(file, ImageFileList) {
this.files.splice(this.files.indexOf(file), 1)
const imgFiles = []
this.files.forEach((o) => {
imgFiles.push(o.url)
})
this.$emit('fileChange', this.files)
this.$emit('change', this.files)
},
handleRemove(file, fileList) {
console.log('file:' + JSON.stringify(file))
console.log('fileList:' + JSON.stringify(fileList))
this.enclosure = ''
// 1. 保存新增文件id(this.file_add)
this.getNewFileId(fileList)
// 2. 保存数据库读取的已有文件id(this.file_catch)
this.getCatchFileId(file)
// 3. 保存并拼接id
this.getFileId()
// 4. 返回拼接id
this.$emit('change', this.enclosure)
},
// 返回this.file_add(新上传文件的id拼接集合)
getNewFileId(fileList) {
// debugger
this.file_add = ''
for (var i = 0; i < fileList.length; i++) {
if (fileList[i].response && fileList[i].response.code === '200') {
this.file_add = this.file_add + fileList[i].response.data + ','
}
}
if (this.file_add !== '') {
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
}
// console.log('1. this.file_add: ' + this.file_add)
},
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
getCatchFileId(file) {
for (var i = 0; i < this.files_list.length; i++) {
if (this.file_catch !== '') {
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
if (this.files_list[i].name === file.name) {
// 2. 拆开file_catch到fils_arry
var fils_arry = this.file_catch.split(',')
// 3. 从fils_arry去除 this.files_list[i].id
var arry = []
fils_arry.forEach((element) => {
// 不加载文件里面的
if (element !== this.files_list[i].id) {
arry.push(element)
}
})
// 4. 重新拼接成file_catch
this.file_catch = arry.join(',')
}
}
}
// console.log('2. this.file_catch:' + this.file_catch)
},
// 保存并拼接id
getFileId() {
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
if (this.file_catch !== '') {
if (this.file_add !== '') {
this.enclosure = this.file_catch + ',' + this.file_add
} else {
this.enclosure = this.file_catch
}
} else {
this.enclosure = this.file_add
}
},
handlePictureCardPreview(file) {
this.dialogVisible = true
this.dialogImageUrl = file.url
},
// 上传失败
uploadError() {
this.loadding = false
},
uploadProgrees(event, file, fileList) {
if (Number(event.percent) > 0) {
this.loadding = true
}
}
}
}
</script>
<style lang="scss" scoped></style>
Write Preview
Loading…
Cancel
Save