yxt_develop
/
anrui
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改问题

master
yunuo970428 2 years ago
parent
14a952b734
commit
6edceda0e0
3 changed files with 0 additions and 471 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. 104
      anrui-riskcenter-ui/src/components/uploadFileimg/index.vue
  2. 223
      anrui-riskcenter-ui/src/components/uploadFileimg/upload.vue
  3. 144
      anrui-riskcenter-ui/src/components/uploadFileimg/upload_head.vue

104
anrui-riskcenter-ui/src/components/uploadFileimg/index.vue
View File

@ -1,104 +0,0 @@
<template>
<el-upload class="avatar-uploader" ref="upload" action="fakeaction"
:show-file-list="false"
:on-change="uploadchangeFile"
:http-request="uploadSectionFile">
<img v-if="FrontPhoto" :src="FrontPhoto" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div slot="tip" class="el-upload__tip">{{tip}}</div>
</el-upload>
</template>
<script>
import { imageUpload } from '@/api/Upload.js'
export default {
props:{
tip:{
type: String,
default: ''
}
},
data() {
return {
FrontPhoto: '',
};
},
methods: {
// 上传文件 FrontPhoto
uploadSectionFile(params) {
const file = params.file,
fileType = file.type,
isImage = fileType.indexOf("image") != -1,
isLt2M = file.size / 1024 / 1024 < 2;
console.log(params)
// 这里常规检验，看项目需求而定
if (!isImage) {
this.$message.error("只能上传图片格式png、jpg、gif!");
return;
}
if (!isLt2M) {
this.$message.error("只能上传图片大小小于2M");
return;
}
// 根据后台需求数据格式
const form = new FormData();
console.log(form)
// 文件对象
form.append("file", file);
// 项目封装的请求方法，下面做简单介绍
imageUpload(form).then(res => {
//自行处理各种情况
console.log(res)
this.$emit('imgUrl',res.filePath)
// this.FrontPhoto = res.fullUrl
if(res.msg == '操作成功'){
this.$message({
message: '上传成功！',
type: 'success'
});
}
})
.catch((err) => {
console.log(err)
});
},
uploadchangeFile(file){
this.FrontPhoto = URL.createObjectURL(file.raw)
}
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 200px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.el-upload__tip{
line-height: 25px;
margin-top: 0;
}
</style>

223
anrui-riskcenter-ui/src/components/uploadFileimg/upload.vue
View File

@ -1,223 +0,0 @@
<template>
<div>
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken" :action="uploadFile" :accept="accept" list-type="picture-card" :limit="limit" :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" title="查看图片">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import { uploadFile } from '@/api/Common/Upload.js'
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: ''
},
accept: {
type: String,
default: '.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx'
},
// 文件名称
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
}
},
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: {
showImg(imgList) {
this.files = imgList
console.log('123123123', this.files)
},
view() {
// window.open(this.filedUrl)
},
// 页面第一次加载
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]
})
}
}
},
handlePictureCardPreview(file) {
console.log(this.file)
this.dialogVisible = true
this.dialogImageUrl = file.url
},
// 上传方案--成功后执行
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,
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)
},
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
}
},
// 上传失败
uploadError() {
this.loadding = false
},
uploadProgrees(event, file, fileList) {
if (Number(event.percent) > 0) {
this.loadding = true
}
// console.log('event:', event)
}
}
}
</script>
<style lang="scss" scoped></style>

144
anrui-riskcenter-ui/src/components/uploadFileimg/upload_head.vue
View File

@ -1,144 +0,0 @@
<template>
<div>
<el-upload ref="imgUpload" class="avatar-uploader" :file-list="files" :headers="accessToken" :accept="accept" :action="uploadFile" :on-success="uploadImgSuccess_FuJian" :show-file-list="false">
<i v-if="Photo === '' && frontPhoto === ''" class="el-icon-plus avatar-uploader-icon" />
<img v-else :src="Photo != '' ? Photo : frontPhoto" class="avatar">
</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.js'
import { getStorage } from '@/utils/auth'
export default {
// model: {
// prop: 'name',
// event: 'change'
// },
props: {
limit: {
type: Number,
default: 1
},
accept: {
type: String,
default: '.jpg,.jpeg,.png,.JPG,.JPEG,.PNG'
},
frontPhoto: {
type: String,
default: ''
}
// 文件名称
// name: {
// type: Array,
// required: true
// }
},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
uploadFile: uploadFile,
files: [],
loadding: false,
Photo: ''
}
},
// watch: {
// name: {
// deep: true,
// immediate: true,
// handler(newVal, oldVal) {
// console.log('aaaa1', newVal)
// this.files = newVal
// if (this.files.length > 1) {
// this.files.splice(0, 1)
// console.log(111111)
// }
// // this.Photo = this.files[0].url
// console.log('333333', this.Photo, this.files)
// console.log('aaaa2', this.files)
// }
// }
// },
// mounted() {
// this.$nextTick(() => {
// this.Init()
// })
// },
created() {
this.uploadFile = uploadFile // 接口
this.accessToken = {
token: getStorage(),
}
},
methods: {
// showImg(imgList) {
// this.files = imgList
// console.log('123123123', this.files)
// },
// // 页面第一次加载
// 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) {
console.log('您选择的file:', file)
if (file.response.code === '200') {
this.loadding = false
// 返显图片
this.Photo = file.response.data.fullUrl
this.files.push({
name: file.response.data.sourceFileName,
url: file.response.data.fullUrl,
size: file.response.data.size
})
this.$emit('photoAdd', this.Photo)
this.$emit('eett', this.files)
}
}
}
}
</script>
<style scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
margin-top: 10%;
width: 200px;
height: 220px;
display: block;
}
</style>
Write Preview
Loading…
Cancel
Save