综合开发

Vue+element实现图片的上传与显示

微信扫一扫,分享到朋友圈

Vue+element实现图片的上传与显示

业务逻辑:某个模块新增时新增图片,详情显示也有图片字段,编辑也能对图片进行编辑。

1.图片上传

自己写了一个图片上传的组件,在父组件中引入即可,图片上传组件返回一个图片id的数组,然后在父组件的上传函数中把图片id传给对应的字段即可。

父组件:

<template>
<div>
<el-form-item label="图片" prop="img">
<imageUpload v-on:change="change"/>
</el-form-item>
</div>
</template>
<script>
import imageUpload from '../../../components/imageUpload.vue'
export default {
components: {
imageUpload
},
data() {
return {
imgIdArr: [],
}
},
methods:{
change(data){
this.imgIdArr=data
},
}
}
</script>复制代码

子组件:

<template>
<el-upload
class="upload-demo"
:action="uploadAction"
:on-remove="onRemove"
:on-success="onSuccess"
list-type="picture"
:file-list="fileList"
name="files[]"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data () {
return {
uploadAction: '',
type:0,
dir:null,
sourceId:null,
createrId:null,  //上传人员
fileList: [],
imgIdArr: [],
}
},
methods: {
init(){
var vm=this
this.imgIdArr = [];
this.uploadAction = this.$api.getJavaEndPoint() + 'web/oss/jqupload?type='+this.type+'&dir='+this.dir+'&createrId'+this.createrId;
// 上传地址,this.$api.getJavaEndPoint()是自己配置的url开头
if(this.sourceId){
this.uploadAction = this.uploadAction+'&sourceId='+this.sourceId;
}
},
// 移除图片
onRemove(file) {
this.$api.sysFileDel(file.id, function (data) {
});
for (var i = 0; i < this.imgIdArr.length; i++) {
var cur = this.imgIdArr[i];
if (cur === file.id) {
this.imgIdArr.splice(i--, 1);
}
}
},
// 上传图片成功
onSuccess(resp, file, fileList) {
if (resp && resp.data.files && resp.data.files.length > 0) {
for (var i = 0; i < resp.data.files.length; i++) {
var cur = resp.data.files[i];
this.imgIdArr.push(cur.id);
file.id = cur.id;
}
}
this.$emit('change',this.imgIdArr)
},
},
created () {
this.init()
}
}
</script>
<style lang='css' scoped>
</style>
复制代码

2.详情显示图片

图片展示时,根据接口返回的数据(数据中有图片的url)处理图片字段,然后显示在页面即可

<template>
<div>
<p>图片:</p>
<el-image
v-for='item in urlList'
:key='item.id'
:src="https://www.tuicool.com/articles/f6Nv6b7/item.url"
style="width:200px"
>
</el-image>
</div>
</template>
<script>
export default {
data() {
return {
urlList: [],
}
},
methods:{
init(id){
var vm = this;
this.urlList=[]
this.$api.ctrlCenterDetail({ obj: { id: id } }, function(data) {
if(data.sysFiles.length>0){
for(var i=0;i<data.sysFiles.length;i++){
if(data.sysFiles[i].url){
data.sysFiles[i].url=vm.$api.getPicPrefix()+data.sysFiles[i].url
vm.urlList.push(data.sysFiles[i])
}
}
}
vm.msg = data
});
vm.detailDialogVisible = true
}
}
}
</script>复制代码

3.编辑图片

<template>
<div class="grid-content bg-purple">
<el-form-item label="图片" prop="img">
<el-upload
class="upload-demo"
:action="uploadAction"
:on-remove="onRemove"
list-type="picture"
:file-list="fileList"
name="files[]"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
uploadAction: '',
type:0,
dir:null,
sourceId:null,
createrId:null,  //上传人员
}
},
methods:{
init(id){
var vm = this
this.fileList=[]
this.sourceId=id
this.uploadAction = this.$api.getJavaEndPoint() + 'web/oss/jqupload?type='+this.type+'&dir='+this.dir+'&createrId'+this.createrId+'&sourceId='+this.sourceId;
var pop = this.fileList.pop();
this.$api.ctrlCenterDetail({ obj: { id: id } }, function(data) {
if (data.sysFiles.length>0) {
for(var i=0;i<data.sysFiles.length;i++){
if(pop){
pop.url = vm.$api.getPicPrefix() + data.sysFiles[i].url;
pop.id = data.sysFiles[i].id;
vm.fileList.push(pop);
}
else{
vm.fileList.push({id: data.sysFiles[i].id, url: vm.$api.getPicPrefix() + data.sysFiles[i].url});
}
}
}
vm.detailsInfo = data
vm.editDialogVisible = true
});
},
onRemove(file) {
this.$api.sysFileDel(file.id, function (data) {
})
},
}
}
</script>复制代码

总结:element里有现成的文件上传的组件,但是需要配置服务器地址,还有是其他的一些改动,本文是具体的业务逻辑。

图片上传时,子组件返回图片的id,然后给后台返回对应的图片id。图片展示时,只需根据接口返回的路径展示即可。图片编辑时,根据具体的模块写入具体的来源id,this.uploadAction传参(比如监控中心就传某条监控中心的id)。

va_list 可变参数概览

上一篇

只需一台电脑,人人都可用 Python 实现新冠病毒分布实时追踪

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

Vue+element实现图片的上传与显示

长按储存图像,分享给朋友